100% de ancho en React Native Flexbox

Ya he leído varios tutoriales de Flexbox, pero todavía no puedo hacer que esta sencilla tarea funcione.

¿Cómo puedo hacer que el cuadro rojo tenga un ancho del 100%?

Código:

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

estilo:

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

¡Gracias!

Actualización 1: sugerencia de Nishanth Shankar, agregando flex:1para el envoltorio, flexDirection: 'row'

Producción:

Código:

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

Oct 23 '15 14:10 franfran

Deberías usar Dimensiones

Primero, defina Dimensiones.

import { Dimensions } from "react-native";

var width = Dimensions.get('window').width; //full width
var height = Dimensions.get('window').height; //full height

luego, cambie line1el estilo como se muestra a continuación:

line1: {
    backgroundColor: '#FDD7E4',
    width: width,
},

Oct 23 '2015 22:10 Melih Mucuk