title: Center a text in the screen with react native
body: <p>I am trying to center a text vertically and horizontally on the screen. This is my code</p>
  
  <pre><code>export default class App extends Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;View style={styles.header}&gt;
           &lt;Text&gt; Header &lt;/Text&gt;
           &lt;/View&gt;
           &lt;Text style={styles.text}&gt; some text in the middle center of the screen &lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
          backgroundColor:'white',
          alignItems:'center',
          justifyContent:'center'
      },
       header: {
          backgroundColor: 'green',
          alignSelf: 'stretch',
          alignItems: 'center',
          heigth: 80 // this dose not change the header height
      },
    text:{
        //flex: 1,
        justifyContent:'center',
    }
  });
  </code></pre>
  
  <p>If I add the flex:1 to text, the header will also be centered which is not expected. I don't know if it's related but the I am also not able to modify the header view height. How can I solve this? The problems can be reproduced on this <a href="https://snack.expo.io/S1urACbJM" rel="noreferrer">snack</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div data-snack-id="S1urACbJM" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.16);border-radius:4px;height:505px;width:100%"&gt;&lt;/div&gt;
  &lt;script async src="https://snack.expo.io/embed.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>