React Native Flexbox: Everything You Need to Know

by

Working with flexbox layout can be tricky, especially in React Native. React native component uses flexbox to design its children.

Related Post: Beginners Guide To Create React Native Application

React Native Flexbox

Flexbox in React Native works the same way in CSS on the web, with a few exceptions. First, the defaults are different, with flexDirection defaulting to a column instead of a row.

Also, the flex parameter only supports a single number if you are new to React Native; please check out the below post.

First, we will install React Native on Mac, then start our tutorial.

Step 1: Install React Native.

Run the following command in a Terminal if you have not previously installed this. Otherwise, skip the below command.

sudo npm install -g react-native-cli

Use the React Native command-line interface to generate a new React Native project called “flex“:

react-native init flex

Now, go into that folder and hit the following command.

cd flex
react-native run-ios

It will take some time to compile, and then the package manager will open, and the iOS simulator will open, and in that, you will see the default screen like below.

Flex Layout In React Native

Step 2: Introduction To Flex Layout.

Okay, now first change our App.js code to the below code. It is at the root of the project.

// App.js

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
    textAlign: 'center',
    fontSize: 20,
    paddingTop: 70,
  }
});

So, your screen looks like below.

Flex layout React Native

Now, we will try to understand the properties one by one. So you can see how flex works.

Here, we have used two styles.

  1. container
  2. welcome

Our parent layout is container layout, and if we assign flex = 1, it will take a whole available screen. Now, we will remove the elements and properties some elements and properties to see what properties are doing what. Then, write the App.js file with the following code.

// App.js

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
      
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  }
});

As discussed earlier, when we assign flex  = 1, it will take the whole screen. So right now, your entire screen is filled with this ‘# F5FCFF’ background color. 

Now, remove the flex property also to see what happens. The background color is gone. Flex property will define Flex container how it should manage space along the Main Axis or share space among several Flex containers.

So if we set flex: 1, then the container will expand the full available width along the Main Axis of its parent. Of course, react Native uses limited Flexbox layout properties and values. But it’s enough to meet all your requirements.

Now, add the styles to the container. So background color takes all the spaces of the screen. So it is our primary container. Okay, let us talk about Main Axis and Cross Axis.

Main Axis

Flex container children always follow parent container Main Axis direction, and by changing flex-direction property, we are changing Main Axis direction. Main Axis means in Maths it is Y-axis or column direction.

Cross Axis

Cross Axis expands in X-axis or rows direction. Therefore, we can change the value by using the flexDirection property.

Add Another element inside the container.

We will add one child element inside the view container.

// App.js

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1
  }
});

Now, reload the iOS screen if you have not enabled hot reloading. By the way, you can allow hot reload by typing the shortcut key: cmd + D, and you will get one menu screen, and in that, select enable hot reload. You will see the screen below.

Create React Native App Tutorial

You can see that the text appears on the screen but at the very top and is not good styled. So what we can do is assign marginTop: 20 to the container and see what happens. Also, assign marginTop: 20 to the welcome style.

// App.js

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1,
    margin: 20
  }
});

You will see the screen like this.

React Native Tutorial For Beginners

Now, it looks good. Okay, now repeat welcome text two times more like this.

// App.js

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
      </View>
    );
  }
}

We have already assigned both the styles container and welcome to flex 1.

// App.js

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1,
    margin: 20
  }
});

Now, we can analyze the screen.

react native consultant

Now, all three children have taken the same height and width. We can see this by assigning the background color and set margin property.

// App.js

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10
  }
});

Okay, now see the screen again.

ios apps built with react native

Now, by default, flexDirection is along the Main Axis. Change the flexDirection to row and see what happens.

// App.js

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    flexDirection: 'row',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10
  }
});

Flex direction row

So the children element is aligned in one row, and the remaining area is covered by flex 1. So this is how you can use the flexDirection property. Now, again remove the flexDirection property. It has two properties as defined below. So you can use it as per your requirement.

flexDirection: 'column' || 'row'

Justify Content

Adding justifyContent to a component’s style determines a distribution of children along a primary axis. What children should be distributed at the start, the center, the end, or spaced evenly? The available options are flex-start, center, flex-end, space-around, space-between, and space-evenly. It will work on the Cross direction or X-axis.

Align Items

It will work on Y-axis or Main Direction. It will align the elements in the flex layout’s start, center, and end. It has the following properties flex-start, center, flex-end, space-around, space-between, and space-evenly. We can use this in our example.

// App.js

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#F5FCFF',
    alignItems: 'flex-start',
  },
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
  }
});

The output looks like this.

create react native app

Similarly, we can assign other properties and see the output changes.

Text Align

The textAlign property aligns the children’s text with left, right, or center. In our example, the text is Welcome to react-native. Now, we can assign textAlign: ‘center’ to the welcome style.

// App.js

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
    textAlign: 'center',
  }
});

react native debugger

Now, we can give the paddingTop to the text to make it in the center and assign the fontSize:20 to look big.

// App.js

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
    textAlign: 'center',
    fontSize: 20,
    paddingTop: 70,
  }
});

So, our final layout looks like this.

build react native app

The final code looks like this.

// App.js

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
    textAlign: 'center',
    fontSize: 20,
    paddingTop: 70,
  }
});

There are more properties that you can learn about React Native Documentation.

That’s it for this tutorial. Thanks for taking it.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.