React-Native layout examples

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

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 flexDirection.

Say you want 3 sections. Top 50%, then two 25% sections.

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
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: .5,
        backgroundColor: '#FF3366'
    },
    quarterHeight: {
        flex: .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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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”.

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 rnplay.org.

Example: Login1

https://rnplay.org/apps/x7HRCA

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.

Tagged under flexbox, layout, react-native

Comments