Responsive Parental Alignment Center and stretch to maxWidth?

Question

I have the following

<View style={{maxWidth: 700}}> <View style={{backgroundColor: 'red', flexDirection: 'row', justifyContent: 'space-between'}}> <Text>Left Item</Text> <Text>Right Item</Text> </View> </View> 

which works as I would expect on a large device (vertical black lines are the edges of the emulator screen).

All I would like to do is center this on the screen.

When I try to do this by adding alignSelf: 'center' to the parent

  <View style={{maxWidth: 700, alignSelf: 'center'}}> <View style={{backgroundColor: 'red', flexDirection: 'row', justifyContent: 'space-between'}}> <Text>Left Item</Text> <Text>Right Item</Text> </View> </View> 

width is lost.

I guess this is because by default alignSelf is "stretch". Is there a way to stretch the content to use maxWidth and center it on the screen?

Answer 1

Try using flex:1 along with maxWidth to make it stretched but limit the width to 700

 <View style={{flexDirection:'row', alignItems: 'center', justifyContent: 'center'}}> <View style={{flex:1, maxWidth: 700, backgroundColor:'red', flexDirection:'row', justifyContent:'space-between'}}> <Text>Left Item</Text> <Text>Right Item</Text> </View> </View>