title: 100% width in React Native Flexbox
body: <p>I have already read several flexbox tutorial, but I still cannot make this simple task to work.</p>
  <p>How can I make the red box to 100% width?</p>
  <p><a href="https://i.stack.imgur.com/7LaIW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7LaIW.png" alt="enter image description here" /></a></p>
  <p>Code:</p>
  <pre><code>  &lt;View style={styles.container}&gt;
      &lt;Text style={styles.welcome}&gt;
        Welcome to React Natives
      &lt;/Text&gt;
      &lt;Text style={styles.line1}&gt;
        line1
      &lt;/Text&gt;
      &lt;Text style={styles.instructions}&gt;
        Press Cmd+R to reload,{'\n'}
        Cmd+D or shake for dev menu
      &lt;/Text&gt;
    &lt;/View&gt;
  </code></pre>
  <p>style:</p>
  <pre><code>container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    borderWidth: 1,
    flexDirection: 'column',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    borderWidth: 1,
  },
  line1: {
      backgroundColor: '#FDD7E4',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    borderWidth: 1,
  },
  </code></pre>
  <p>Thank you!</p>
  <p><strong>Update 1:</strong>
  Suggestion by Nishanth Shankar, adding
  <code>flex:1</code> for the wrapper,
  <code>flexDirection: 'row'</code></p>
  <p>Output:</p>
  <p><a href="https://i.stack.imgur.com/N7J8C.png" rel="noreferrer"><img src="https://i.stack.imgur.com/N7J8C.png" alt="enter image description here" /></a></p>
  <p>Code:</p>
  <pre><code>  &lt;View style={styles.container}&gt;
      &lt;View style={{flex:1}}&gt;
        &lt;Text style={styles.welcome}&gt;
          Welcome to React Natives
        &lt;/Text&gt;
      &lt;/View&gt;
      &lt;View style={{flex:1}}&gt;
        &lt;Text style={styles.line1}&gt;
          line1
        &lt;/Text&gt;
      &lt;/View&gt;
      &lt;View style={{flex:1}}&gt;
        &lt;Text style={styles.instructions}&gt;
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        &lt;/Text&gt;
      &lt;/View&gt;
    &lt;/View&gt;
  
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
      borderWidth: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
      borderWidth: 1,
    },
    line1: {
        backgroundColor: '#FDD7E4',
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 5,
      borderWidth: 1,
    },
  </code></pre>