Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text vertical align in react native (using nativebase)

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.

like image 400
ckim16 Avatar asked Jun 02 '17 21:06

ckim16


People also ask

How do I align vertically in React Native?

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.

How do you center text vertically in react?

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 .

How align text in bottom of React Native?

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.


2 Answers

You can use the flex property, justifyContent to achieve this. Full documentation here.

<View style={{justifyContent: 'center'}}>    <Text>Vertically Centered Text</Text> </View> 
like image 65
Greg Billetdeaux Avatar answered Sep 22 '22 04:09

Greg Billetdeaux


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     } 
like image 29
Haseeb A Avatar answered Sep 23 '22 04:09

Haseeb A