100% width in React Native Flexbox

I have already read several flexbox tutorial, but I still cannot make this simple task to work.

How can I make the red box to 100% width?

Code:

<View style={styles.container}><Text style={styles.welcome}>      Welcome to React Natives</Text><Text style={styles.line1}>      line1</Text><Text style={styles.instructions}>      Press Cmd+R to reload,{'\n'}      Cmd+D or shake for dev menu</Text></View>

style:

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,},

Thank you!

Update 1:Suggestion by Nishanth Shankar, addingflex:1 for the wrapper,flexDirection: 'row'

Output:

Code:

<View style={styles.container}><View style={{flex:1}}><Text style={styles.welcome}>        Welcome to React Natives</Text></View><View style={{flex:1}}><Text style={styles.line1}>        line1</Text></View><View style={{flex:1}}><Text style={styles.instructions}>        Press Cmd+R to reload,{'\n'}        Cmd+D or shake for dev menu</Text></View></View>  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,  },