title: How to set text in center in react native
body: <p>Hi I want to set <code>Text</code> in center, I tried <code>justifyContent</code> and <code>alignItems</code> to center but it didn't work for me, text is displaying at the top.</p>
  
  <p>LoginScreenStyles.js</p>
  
  <pre><code>export default StyleSheet.create({
    ...ApplicationStyles.screen,
    container: {
      paddingBottom: Metrics.baseMargin
    },
    centered: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center"
    }
  });
  </code></pre>
  
  <p>ApplicationStyles.js</p>
  
  <pre><code>const ApplicationStyles = {
    screen: {
      mainContainer: {
        flex: 1,
        backgroundColor: Colors.transparent
      },
      backgroundImage: {
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
        right: 0
      },
      container: {
        flex: 1,
        paddingTop: Metrics.baseMargin,
        backgroundColor: Colors.transparent
      },
      section: {
        margin: Metrics.section,
        padding: Metrics.baseMargin
      },
      sectionText: {
        ...Fonts.style.normal,
        paddingVertical: Metrics.doubleBaseMargin,
        color: Colors.snow,
        marginVertical: Metrics.smallMargin,
        textAlign: "center"
      },
      subtitle: {
        color: Colors.snow,
        padding: Metrics.smallMargin,
        marginBottom: Metrics.smallMargin,
        marginHorizontal: Metrics.smallMargin
      },
      titleText: {
        ...Fonts.style.h2,
        fontSize: 14,
        color: Colors.text
      }
    },
    darkLabelContainer: {
      padding: Metrics.smallMargin,
      paddingBottom: Metrics.doubleBaseMargin,
      borderBottomColor: Colors.border,
      borderBottomWidth: 1,
      marginBottom: Metrics.baseMargin
    },
    darkLabel: {
      fontFamily: Fonts.type.bold,
      color: Colors.snow
    },
    groupContainer: {
      margin: Metrics.smallMargin,
      flexDirection: "row",
      justifyContent: "space-around",
      alignItems: "center"
    },
    sectionTitle: {
      ...Fonts.style.h4,
      color: Colors.coal,
      backgroundColor: Colors.ricePaper,
      padding: Metrics.smallMargin,
      marginTop: Metrics.smallMargin,
      marginHorizontal: Metrics.baseMargin,
      borderWidth: 1,
      borderColor: Colors.ember,
      alignItems: "center",
      textAlign: "center"
    }
  };
  
  export default ApplicationStyles;
  </code></pre>
  
  <p>LoginScreen.js</p>
  
  <pre><code>import React, { Component } from "react";
  import { View, Text } from "react-native";
  
  // Styles
  import styles from "./Styles/LoginScreenStyles";
  
  export default class LoginScreen extends Component {
    render() {
      return (
        &lt;View style={styles.mainContainer}&gt;
          &lt;Text style={styles.centered}&gt;
            This probably isn't what your app is going to look like. Unless your
            designer handed you this screen and, in that case, congrats! You're
            ready to ship. For everyone else, this is where you'll see a live
            preview of your fully functioning app using Ignite.
          &lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/MmCER.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MmCER.png" alt="enter image description here"></a></p>