Flexbox layout takes a bit getting used to. It’s surprisngly simple but after so many years of box model css layout it throws you for a loop.
Percentage height sections
These are seemingly simple to do in CSS. Specify
height: 50% and you get a magical 50% height. Yeah I’m over simplifying it but in general that’s what you get. In flex it’s different.
This percentage based layout question was asked here https://github.com/facebook/react-native/issues/364.
Laying out login screens may require significant white space. To accomplish % based layout we can use the
flex property along with
Say you want 3 sections. Top
50%, then two
Our code would look something like this
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
This makes it look like percentages, however what actually is happening is just ratios.
The ratios are easier to represent with non-decimals. Equivalent code to the above would look like.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
That’s saying that the
halfHeight container should take up twice as much space, and the
quarterHeight should take up one amount of space.
The actual numbers depend on screen size, and/or also derived from parent containers. So we can’t attach specific heights.
It just means “
halfHeight should take up 2 units of height where
quarterHeight takes up 1 unit/half as much height as the
You can check out a live demo here https://rnplay.org/apps/MbQEbQ
React-Native Example Screens
Not being very good at flexbox I figured what better way than to create a bunch of layout examples to practice. That’s when I saw http://www.invisionapp.com/do. It has a bunch of beautiful layouts, so I am attempting to recreate some.
You can check out the repo here https://github.com/browniefed/react-native-screens
I’ve made them all runnable on
If you like this, feel free to contribute and download the screens from http://www.invisionapp.com/do. I found the Sketch ones were the easiest to handle and export individual assets from.