You can position any components anywhere on the screen using Flexbox. You can arrange them vertically, horizontally, center them, distribute evenly and much more.

What is Flexbox?

The CSS3 Flexible Box, or Flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Let’s Get Started

Let’s start by creating a new app. Open Terminal App and run these commands to initialize a new project and run it in emulator.

react-native init LearnignFlexbox;
cd LearnignFlexbox;
react-native run-ios;

Once your app is up and running, press ⌘D and select Enable Hot Reloading. This will save you some time having to reload the app manually every time you make a change.

Open index.ios.js file and change its content with the following code.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class LearnignFlexbox extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.navBar}>
          <Text style={styles.navBarButton}>Back</Text>
          <Text style={styles.navBarHeader}>Awesome App</Text>
          <Text style={styles.navBarButton}>More</Text>
        </View>
        <View style={styles.content}>
          <Text style={styles.text}>
            Welcome to Awesome App!
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({

});

AppRegistry.registerComponent('LearnignFlexbox', () => LearnignFlexbox);

As you can see, we have a View component with container style and two more Views inside it, navBar and content. navBar has 3 Text components with either navBarButton style for button on left and right or navBarHeader style for the header. And, lastly, content View has Text inside.

Ok, let’s take at look at our progress so far.

Doesn’t look that great, huh? That’s because we haven’t defined any of those styles mentioned yet. By default all of the components are vertically stacked on top of each other.

Defining Styles

Let’s start adding our styles inside styles definition we added earlier.

const styles = StyleSheet.create({
  
});

Main Flexible Container

First, let’s add container style

  container: {
    flex: 1,
  },

flex: 1 means that container is flexible and will take up all of the space on the screen. Nothing has changed on the screen, because container has white background.

Understanding Flexible Containers

To illustrate how that works let’s take a look at quick example here. Let’s change container background and try setting flex to ether 0 or 1.

Container on the left has flex set to 0 and it takes as much space as all of its children take. In contrast, container on the right has flex set to 1 and takes all of the available space on the screen.

Nav Bar

Let’s add a nav bar at the top of the screen. Add navBar style

  navBar: {
    flexDirection: 'row',
    paddingTop: 30,
    height: 64,
    backgroundColor: '#1EAAF1'
  },

We set total height to 64 and paddingTop to 30 to push it down from status bar. And we set flexDirection to row, which means that all of the navBar children components will be stacked horizontally instead of vertically. By default flexDirection is column and children are stacked vertically.

Let’s see where are we at.

Looks better, but we want to have buttons aligned on the sides and header centered. So, let’s add styles to do that.

  navBarButton: {
    color: '#FFFFFF',
    textAlign:'center',
    width: 64
  },
  navBarHeader: {
    flex: 1,
    color: '#FFFFFF',
    fontWeight: 'bold',
    textAlign: 'center'
  },

We set width to 64 for buttons, and flex to 1 for the header, which means that it will take all of the space available between buttons.

Looks much better.

Center Content Vertically and Horizontally

Next, we want to center welcome text on the screen. Let’s add some styles for content and text containers.

  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#374046'
  },
  text: {
    color: '#EEEEEE'
  },

We set flex to 1 to take all available screen space, justifyContent to center to center children components vertically and alignItems to center to center horizontally.

When you switch flexDirection to row mode justifyContent and alignItems work the opposite way. justifyContent gets responsible for aligning children components horizontally and alignItems vertically.

Let’s check out how is out app looking so far.

Looks pretty good.

Tab Bar

Now, let’s add tab bar at the bottom. Just add new View after <View style={styles.content}> closing </View> tag.

<View style={styles.content}>
  <Text style={styles.text}>
    Welcome to Awesome App!
  </Text>
</View>
// Add the following 
<View style={styles.tabBar}>
  <View style={[styles.tabBarButton, styles.button1]} />
  <View style={[styles.tabBarButton, styles.button2]} />
  <View style={[styles.tabBarButton, styles.button3]} />
  <View style={[styles.tabBarButton, styles.button4]} />
  <View style={[styles.tabBarButton, styles.button5]} />
</View>

We added View with tabBar style and 5 children View components for buttons. Each button uses two styles, first is tabBarButton, which is the same for all buttons and unique styles button1 through button5 for each button.

When you want to use more than one style for a component you can use and array [] of styles style={[styles.tabBarButton, styles.button1]} with as many comma separated styles as you wish.

And let’s define the styles

  tabBar: {
    height: 50
  },
  tabBarButton: {
    flex: 1
  },
  button1: { backgroundColor: '#8BC051' },
  button2: { backgroundColor: '#CCD948' },
  button3: { backgroundColor: '#FDE84D' },
  button4: { backgroundColor: '#FCBF2E' },
  button5: { backgroundColor: '#FC9626' }

We defined fixed height for tabBar, and set flex to 1 for tabBarButton, which means that each button will take as much space as available equally. And we also defined unique color for each button.

Let’s see how does that look.

Oops, all of our buttons got stacked vertically, which is default behavior, but not what we wanted. Let’s set flexDirection to row in order to stack buttons horizontally.

  tabBar: {
    flexDirection: 'row',
    height: 50
  },

Ok, now it perfect.

Understanding Flex

When we set flex to 1 for each button, that means each button will take as much space is available and all of then will take the same amount of space. If we wanted 3rd button to be as twice as big as other buttons we could set its flex value to 2.

  button3: { flex: 2, backgroundColor: '#FDE84D' },

And then it will look like

Understanding Aligning Containers

Let’s change tabBarButton to have fixed weight and height instead of being flexible.

  tabBarButton: {
    width: 30,
    height: 30
  },

Primary and Secondary Axis

In flexDirection default column mode the primary axis is column, the secondary is row, and vice versa in row mode.

Justify Content

Adding justifyContent to a component’s style sets the distribution of children along the primary axis. Available options are

flex-start (default) — Children distributed at the start.

center — Children are centered.

flex-end — Children distributed at the end.

space-around — Children distributed with equal space around them.

space-between — Children distributed evenly.

Align Items

Adding alignItems to a component’s style sets the alignment of children along the secondary axis. Available options are

flex-start — Children aligned at the start.

center — Children aligned at the center.

flex-end — Children aligned at the end.

stretch (default) — Children stretched to fill up all space. This options doesn’t  work for children with fixed dimension along the secondary axis.

Conclusion

Flexbox is very powerful tool for creating any kind of responsive layouts for your apps. Keep in mind that default flex direction is column and do not forget to change it to row when you need to arrange children horizontally.

I hope you enjoyed the tutorial. Subscribe to find out about new tutorials and learn how to build amazing apps!