AppDividend
Latest Code Tutorials

React Native Flexbox Tutorial With Example

933

Get real time updates directly on you device, subscribe now.

In this example, we will learn React Native Flexbox Tutorial. Working with flexbox layout can be tricky, especially in React Native. React native component uses flexbox to design its children. Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of a row, and the flex parameter only supporting a single number. If you are new to React Native please checkout by below post.

Related Post: Beginners Guide To Create React Native Application

React Native Flexbox Tutorial.

First, we will install React Native on Mac, and then we will 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 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 in 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 that, 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, then 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. 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 we have discussed earlier, when we assign flex  = 1 then 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 for Flex container how it should manage space along the Main Axis or how it should share space among several Flex containers. So if we set flex: 1, then the container will expand full available width along Main Axis of its parent. 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

Related Posts
1 of 4

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

Add Another element inside the container.

We will add one child element inside 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 like below.

Create React Native App Tutorial

You can see that the text appears on the screen but at the very top and 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

See, now all of the three children have taken 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. You can use as of 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-endspace-around, space-between, and space-evenly. It will work on Cross direction or X-axis.

Align Items

It will work on Y-axis or Main Direction. It will align the elements in the start, center, and end of the flex layout. 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 we can see the output changes.

Text Align

The textAlign property aligns the children text to be 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 also 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 on React Native Documentation.

Finally, React Native Flexbox Tutorial is over. Thanks for taking.

Leave A Reply

Your email address will not be published.

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