Menu
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>
899
alignSelf controls how a child aligns in the cross direction, overriding the alignItems of the parent. It works like align-self in CSS (default: auto).
flexGrow describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
Normally you will use flex: 1 , which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.
Justify Contentflex-end Align children of a container to the end of the container's main axis. center Align children of a container in the center of the container's main axis. space-between Evenly space off children across the container's main axis, distributing the remaining space between the children.
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
