CODEWITHSUNDEEP
reactjsreact-nativeflexbox
Remzi Ibrahim Zayid
Remzi Ibrahim Zayid

Reputation: 106

React Native - Justify Content not Working

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?

Upvotes: 2

Views: 3145

Answers (1)

Andrew Hulterstrom
Andrew Hulterstrom

Reputation: 1725

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.

Upvotes: 1

Related Questions