I was wondering there is a way I can align vertically in React Native. I'm trying to position on the bottom but I don't think I can find a good way to do it.
If anyone knows how to solve this issue, please let me know.
To vertically align image with resizeMode "contain" with React Native, we can use justifyContent . to set justifyContent to 'center' to center align the Image vertically. We also set the image height and width to make it display. As a result, we should see the image display vertically centered.
Both vertically and horizontally Add . d-flex to the parent element to enable flex mode. Then use (also on the parent element) . align-items-center to align content vertically and .
To move the button to the bottom, we use justifyContent to lay out items in the main axis, with flex-end , which aligns the flex items at the end of the container.
You can use the flex
property, justifyContent
to achieve this. Full documentation here.
<View style={{justifyContent: 'center'}}> <Text>Vertically Centered Text</Text> </View>
to align any content including text both horizontally and vertically, simply use the following in the container which holds it
container :{ justifyContent: 'center', //Centered horizontally alignItems: 'center', //Centered vertically flex:1 }
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