i have a problem with the location of the content in React Native. How can I move the hello world sentence to the middle of the screen

Question

How can I move the hello world sentence to the middle of the screen

Here are my codes:

import React from "react";
import {StyleSheet, Text, View} from "react-native";

export default function App(){
  return(
    <View style = {StyleSheet.container}>
      <Text> Hello World</Text>
    </View>
  );
}

{/* stylings of react native*/}

const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:"blue", 
    alignContent:"center",
    justifyContent:"center"
  }
})

result: Image

Answer 1

return(
    <View style = {styles.container}>  // <-- CHANGE THIS
      <Text> Hello World</Text>
    </View>
  );

Answer 2

If you also want the text to be in the center horizontally you have to use alignItems:"center" instead of alignContent:"center". Look at this post in case you want more information about the diffence between the two.

Answer 3

Solution

You are doing 2 things wrong

1. StyleSheet is an API to create styles. You cannot use it to access styles defined inside create method. Instead you need to use styles variable instead.

<View style={StyleSheet.container}> // ❌
<View style={styles.container}> // ✅

2. You need to use alignItems instead of alignContent to centrally align the Text inside View.

alignContent:"center", // ❌
alignItems:"center", // ✅