React Native stretch row items?

Question

I have to buttons next to each other in a view For some reason even if I setting the View to alignItems: 'stretch' or set the items alignSelf: 'stretch' they won't use up the available space. How could I solve this?

For example:

<View style={{flexDirection: 'row', alignItems: 'stretch'}}>
    <View style={{backgroundColor: 'red', height: 100}}/>
    <View style={{backgroundColor: 'blue', height: 100}}/>
</View>

The views won't stretch, and the inside elements will stay with width: 0

or same with the Button items:

<View style={{flexDirection: 'row', alignItems: 'stretch'}}>
    <Button title='text' style={{backgroundColor: 'red', 
    height: 100}}/>
    <Button title='text' style={{backgroundColor: 'blue', 
    height: 100}}/>
</View>

Answer 1

You need to give width to main view. So you can set button based on it. Also, you need to set flex for each button.

<View style={{flexDirection: 'row', width:'100%', flex:1}}>
    <Button title='text' style={{backgroundColor: 'red', 
    height: 100, flex:1}}/>
    <Button title='text' style={{backgroundColor: 'blue', 
    height: 100, flex:1}}/>
</View>

Answer 2

I just realise you are using alignItems, while you should be using justifyContent to spread your items over the main axis (horizontal in your case). Stretch is no option for justifyContent so you could choose space-between or space-evenly for instance:

<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
    <View style={{backgroundColor: 'red', height: 100}}/>
    <View style={{backgroundColor: 'blue', height: 100}}/>
</View>