100% width in React Native Flexbox - flexbox

Question

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, adding
flex: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,
},

Answer 1

Simply add alignSelf: "stretch" to your item's stylesheet.
line1: {
backgroundColor: '#FDD7E4',
alignSelf: 'stretch',
textAlign: 'center',
},

Answer 2

You should use Dimensions
First, define Dimensions.
import { Dimensions } from "react-native";
var width = Dimensions.get('window').width; //full width
var height = Dimensions.get('window').height; //full height
then, change line1 style like below:
line1: {
backgroundColor: '#FDD7E4',
width: width,
},

Answer 3

Editted:
In order to flex only the center text, a different approach can be taken - Unflex the other views.
Let flexDirection remain at 'column'
remove the alignItems : 'center' from container
add alignSelf:'center' to the textviews that you don't want to flex
You can wrap the Text component in a View component and give the View a flex of 1.
The flex will give :
100% width if the flexDirection:'row' in styles.container
100% height if the flexDirection:'column' in styles.container

Answer 4

Here you go:
Just change the line1 style as per below:
line1: {
backgroundColor: '#FDD7E4',
width:'100%',
alignSelf:'center'
}

Answer 5

First add Dimension component:
import { AppRegistry, Text, View,Dimensions } from 'react-native';
Second define Variables:
var height = Dimensions.get('window').height;
var width = Dimensions.get('window').width;
Third put it in your stylesheet:
textOutputView: {
flexDirection:'row',
paddingTop:20,
borderWidth:1,
borderColor:'red',
height:height*0.25,
backgroundColor:'darkgrey',
justifyContent:'flex-end'
}
Actually in this example I wanted to make responsive view and wanted to view only 0.25 of the screen view so I multiplied it with 0.25, if you wanted 100% of the screen don't multiply it with any thing like this:
textOutputView: {
flexDirection:'row',
paddingTop:20,
borderWidth:1,
borderColor:'red',
height:height,
backgroundColor:'darkgrey',
justifyContent:'flex-end'
}

Answer 6

Use javascript to get the width and height and add them in View's style.
To get full width and height, use Dimensions.get('window').width
https://facebook.github.io/react-native/docs/dimensions.html
getSize() {
return {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
}
}
and then,
<View style={[styles.overlay, this.getSize()]}>

Answer 7

width: '100%' and alignSelf: 'stretch' didn't work for me. Dimensions didn't suite my task cause I needed to operate on a deeply nested view. Here's what worked for me, if I rewrite your code. I just added some more Views and used flex properties to achieve the needed layout:
{/* a column */}
<View style={styles.container}>
{/* some rows here */}
<Text style={styles.welcome}>
Welcome to React Natives
</Text>
{/* this row should take all available width */}
<View style={{ flexDirection: 'row' }}>
{/* flex 1 makes the view take all available width */}
<View style={{ flex: 1 }}>
<Text style={styles.line1}>
line1
</Text>
</View>
{/* I also had a button here, to the right of the text */}
</View>
{/* the rest of the rows */}
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>

Answer 8

just remove the alignItems: 'center' in the container styles and add textAlign: "center" to the line1 style like given below.
It will work well
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
borderWidth: 1,
}
line1: {
backgroundColor: '#FDD7E4',
textAlign:'center'
},

Answer 9

Style ={{width : "100%"}}
try this:
StyleSheet generated: {
"width": "80%",
"textAlign": "center",
"marginTop": 21.8625,
"fontWeight": "bold",
"fontSize": 16,
"color": "rgb(24, 24, 24)",
"fontFamily": "Trajan Pro",
"textShadowColor": "rgba(255, 255, 255, 0.2)",
"textShadowOffset": {
"width": 0,
"height": 0.5
}
}

Answer 10

Noted: Try to fully understanding about flex concept.
<View style={{
flex: 2,
justifyContent: 'center',
alignItems: 'center'
}}>
<View style ={{
flex: 1,
alignItems: 'center,
height: 50,
borderWidth: 1,
borderColor: '#000'
}}>
<Text>Welcome to React Nativ</Text>
</View>
<View style={{
flex: 1,
alignItems: 'center,
borderWidth: 1,
borderColor: 'red ',
height: 50
}}
>
<Text> line 1 </Text>
</View>
<View style={{
flex: 1,
alignItems: 'center,
height: 50,
borderWidth: 1,
borderColor: '#000'
}}>
<Text>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
</View>

Answer 11

Simply use width:'100%'
line1: {
backgroundColor: '#FDD7E4',
width: '100%'
},