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.
Some examples
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 flexDirection
.
Say you want 3 sections. Top 50%
, then two 25%
sections.
Our code would look something like this
var SampleApp = React.createClass({
render: function () {
return (
<View style={styles.container}>
<View style={styles.halfHeight} />
<View style={styles.quarterHeight} />
<View style={[styles.quarterHeight, { backgroundColor: "#CCC" }]} />
</View>
);
},
});
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
},
halfHeight: {
flex: 0.5,
backgroundColor: "#FF3366",
},
quarterHeight: {
flex: 0.25,
backgroundColor: "#000",
},
});
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.
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
},
halfHeight: {
flex: 2,
backgroundColor: "#FF3366",
},
quarterHeight: {
flex: 1,
backgroundColor: "#000",
},
});
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 halfHeight
container".
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
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.
Join our community and get help with React, React Native, and all web technologies. Even recommend tutorials, and content you want to see.