React Native - Justify Content not Working

user_2840745 0
Viewed 1070

I've been struggling with this all over my react-native app, so I set up a very simple example of it in codesandbox which you can view here:

https://codesandbox.io/s/elastic-star-5754q?file=/src/App.js

Within the View with the green background, all of the internal views are centered horizontally within their respective spaces as I would expect thanks to the "alignItems: center" style property. I would expect that I could also center them vertically within their spaces by setting "justifyContent: center", but that doesn't seem to work for me.

Am I fundamentally misunderstanding something?

flexbox react-native reactjs
1 Answers

The problem is that you are not aligning the text within the individual Views. Your example mistakenly aligns the inner View elements within the larger View element rather than aligning the text.

To center-align the text vertically within their Views you just need to add justifyContent: "center" to those individual three green Views.

Here's an example: https://codesandbox.io/s/recursing-kirch-n8one?file=/src/App.js:393-417

To further explain why you were experiencing the issue you did, see this screenshot with boxes outlining the space the elements were taking up on-screen:

Boxes

You can see the inner Views are only taking up the needed width of the text elements inside, but are using the max height available to them.

user_153516400
Related