How to Make React Native Bottom Navigation with Latest Navigation V. 4+

Here is an example of React Native Bottom Navigation. Bottom Navigation is very useful when you have 2-3 main navigation options. It provides the user with easy access to regular usable options.

In this example, We will make a Bottom Navigation with navigation options like Home and Setting. Each screen has other navigation options too. So let’s get started.

This example is updated for the React Navigation 4.0+. For more about React Navigation 4 please have a look at Using React Navigation 4.0 in React Native apps.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the --version argument:

react-native init ProjectName --version X.XX.X

react-native init ProjectName --version react-native@next

This will make a project structure with an index file named App.js in your project directory.

Installation of Dependencies

To install the dependencies open the terminal and jump into your project

cd ProjectName

1	cd ProjectName

1. Install react-navigation dependency to import createAppContainer

npm install react-navigation --save

1	npm install react-navigation --save

2. Install react-native-gesture-handler dependency to support gesture navigation

npm install react-native-gesture-handler --save

1	npm install react-native-gesture-handler --save

3. Install react-navigation-tabs to import createBottomTabNavigator

npm install react-navigation-tabs --save

1	npm install react-navigation-tabs --save

4. Install react-native-reanimated for the bottom tab animation (Used internally by react-navigation-tabs)

npm install react-native-reanimated --save

1	npm install react-native-reanimated --save

5. We are going to use Ionicons to show the menu icons from react-native-vector-icons/Ionicons. So install react-native-vector-icons

npm install react-native-vector-icons --save

1	npm install react-native-vector-icons --save

These steps are enough for the bottom tab navigation but in this example we are also using createStackNavigator to switch screeens, so please follow the next step also

6. Install react-navigation-stack to import createStackNavigator

npm install react-navigation-stack --save

1	npm install react-navigation-stack --save

These commands will copy all the dependencies into your node_module directory.

Linking of Dependency

After the updation of React Native 0.60, they have introduced autolinking feature means we do not require to link the library but they have also mentioned that some libraries need linking and react-native-vector-icons is one of those cases. So for that we need to link the library using

react-native link react-native-vector-icons

1	react-native link react-native-vector-icons

CocoaPods Installation

In this example we need to install the pods for react-native-gesture-handler, react-native-reanimated and react-native-vector-icons.

Please use the following command to install CocoaPods

cd ios && pod install && cd ..

1	cd ios && pod install && cd ..

Project File Structure

To start with this Example you need to create a directory named pages in your project and create four files DetailsScreen.js, HomeScreen.js, ProfileScreen.js and SettingScreen.js in it.

Now Open App.js in any code editor and replace the code with the following code.

App.js

//This is an example code for Bottom Navigation//
import React from 'react';
import { Button, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
//import all the basic component we have used
import Ionicons from 'react-native-vector-icons/Ionicons';
//import Ionicons to show the icon for bottom options

//For React Navigation 3+
//import {
//  createStackNavigator,
//  createBottomTabNavigator,
//  createAppContainer,
//} from 'react-navigation';

//For React Navigation 4+
import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {createStackNavigator} from 'react-navigation-stack';

import HomeScreen from './pages/HomeScreen';
import SettingsScreen from './pages/SettingsScreen';
import DetailsScreen from './pages/DetailsScreen';
import ProfileScreen from './pages/ProfileScreen';
const HomeStack = createStackNavigator(
  {
    //Defination of Navigaton from home screen
    Home: { screen: HomeScreen },
    Details: { screen: DetailsScreen },
  },
  {
    defaultNavigationOptions: {
      //Header customization of the perticular Screen
      headerStyle: {
        backgroundColor: '#42f44b',
      },
      headerTintColor: '#FFFFFF',
      title: 'Home',
      //Header title
    },
  }
);
const SettingsStack = createStackNavigator(
  {
    //Defination of Navigaton from setting screen
    Settings: { screen: SettingsScreen },
    Details: { screen: DetailsScreen },
    Profile: { screen: ProfileScreen },
  },
  {
    defaultNavigationOptions: {
      //Header customization of the perticular Screen
      headerStyle: {
        backgroundColor: '#42f44b',
      },
      headerTintColor: '#FFFFFF',
      title: 'Settings',
      //Header title
    },
  }
);
const App = createBottomTabNavigator(
  {
    Home: { screen: HomeStack },
    Settings: { screen: SettingsStack },
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        } else if (routeName === 'Settings') {
          iconName = `ios-checkmark-circle${focused ? '' : '-outline'}`;
        }
        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: '#42f44b',
      inactiveTintColor: 'gray',
    },
  }
);
export default createAppContainer(App);

//This is an example code for Bottom Navigation//

import React from 'react';

import { Button, Text, View, TouchableOpacity, StyleSheet } from 'react-native';

//import all the basic component we have used

import Ionicons from 'react-native-vector-icons/Ionicons';

//import Ionicons to show the icon for bottom options

//For React Navigation 3+

//import {

// createStackNavigator,

// createBottomTabNavigator,

// createAppContainer,

//} from 'react-navigation';

//For React Navigation 4+

import {createAppContainer} from 'react-navigation';

import {createBottomTabNavigator} from 'react-navigation-tabs';

import {createStackNavigator} from 'react-navigation-stack';

import HomeScreen from './pages/HomeScreen';

import SettingsScreen from './pages/SettingsScreen';

import DetailsScreen from './pages/DetailsScreen';

import ProfileScreen from './pages/ProfileScreen';

const HomeStack = createStackNavigator(

{

//Defination of Navigaton from home screen

Home: { screen: HomeScreen },

Details: { screen: DetailsScreen },

{

defaultNavigationOptions: {

//Header customization of the perticular Screen

headerStyle: {

backgroundColor: '#42f44b',

headerTintColor: '#FFFFFF',

title: 'Home',

//Header title

}

);

const SettingsStack = createStackNavigator(

{

//Defination of Navigaton from setting screen

Settings: { screen: SettingsScreen },

Details: { screen: DetailsScreen },

Profile: { screen: ProfileScreen },

{

defaultNavigationOptions: {

//Header customization of the perticular Screen

headerStyle: {

backgroundColor: '#42f44b',

headerTintColor: '#FFFFFF',

title: 'Settings',

//Header title

}

);

const App = createBottomTabNavigator(

{

Home: { screen: HomeStack },

Settings: { screen: SettingsStack },

{

defaultNavigationOptions: ({ navigation }) => ({

tabBarIcon: ({ focused, horizontal, tintColor }) => {

const { routeName } = navigation.state;

let IconComponent = Ionicons;

let iconName;

if (routeName === 'Home') {

iconName = `ios-information-circle${focused ? '' : '-outline'}`;

} else if (routeName === 'Settings') {

iconName = `ios-checkmark-circle${focused ? '' : '-outline'}`;

}

return <IconComponent name={iconName} size={25} color={tintColor} />;

}),

tabBarOptions: {

activeTintColor: '#42f44b',

inactiveTintColor: 'gray',

}

);

export default createAppContainer(App);

Open pages/DetailsScreen.js in any code editor and the Replace the code with the following code.

DetailsScreen.js

//This is an example code for Bottom Navigation//
import React from 'react';
//import react in our code.
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
//import all the basic component we have used

export default class DetailsScreen extends React.Component {
  //Detail Screen to show from any Open detail button
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Details!</Text>
      </View>
    );
  }
}

//This is an example code for Bottom Navigation//

import React from 'react';

//import react in our code.

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

//import all the basic component we have used

export default class DetailsScreen extends React.Component {

//Detail Screen to show from any Open detail button

render() {

return (

<Text>Details!</Text>

</View>

);

}

Open pages/HomeScreen.js in any code editor and the Replace the code with the following code.

HomeScreen.js

//This is an example code for Bottom Navigation//
import React from 'react';
//import react in our code.
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
//import all the basic component we have used

export default class HomeScreen extends React.Component {
  //Home Screen to show in Home Option
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ marginTop: 50, fontSize: 25 }}>Home!</Text>
        <View
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.props.navigation.navigate('Settings')}>
            <Text>Go to settng Tab</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.props.navigation.navigate('Details')}>
            <Text>Open Details Screen</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    width: 300,
    marginTop: 16,
  },
});

//This is an example code for Bottom Navigation//

import React from 'react';

//import react in our code.

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

//import all the basic component we have used

export default class HomeScreen extends React.Component {

//Home Screen to show in Home Option

render() {

return (

<View

style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

<TouchableOpacity

style={styles.button}

onPress={() => this.props.navigation.navigate('Settings')}>

<Text>Go to settng Tab</Text>

</TouchableOpacity>

<TouchableOpacity

style={styles.button}

onPress={() => this.props.navigation.navigate('Details')}>

<Text>Open Details Screen</Text>

</TouchableOpacity>

</View>

);

}

const styles = StyleSheet.create({

button: {

alignItems: 'center',

backgroundColor: '#DDDDDD',

padding: 10,

width: 300,

marginTop: 16,

});

Open pages/ProfileScreen.js in any code editor and the Replace the code with the following code.

ProfileScreen.js

//This is an example code for Bottom Navigation//
import React from 'react';
//import react in our code.
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
//import all the basic component we have used

export default class ProfileScreen extends React.Component {
  //Profile Screen to show from Open profile button
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Profile!</Text>
      </View>
    );
  }
}

//This is an example code for Bottom Navigation//

import React from 'react';

//import react in our code.

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

//import all the basic component we have used

export default class ProfileScreen extends React.Component {

//Profile Screen to show from Open profile button

render() {

return (

<Text>Profile!</Text>

</View>

);

}

Open pages/SettingsScreen.js in any code editor and the Replace the code with the following code.

SettingsScreen.js

//This is an example code for Bottom Navigation//
import React from 'react';
//import react in our code.
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
//import all the basic component we have used

export default class SettingsScreen extends React.Component {
  //Setting Screen to show in Setting Option
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ marginTop: 50, fontSize: 25 }}>Setting!</Text>
        <View
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.props.navigation.navigate('Home')}>
            <Text>Go to Home Tab</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.props.navigation.navigate('Details')}>
            <Text>Open Detail Screen</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.props.navigation.navigate('Profile')}>
            <Text>Open Profile Screen</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    width: 300,
    marginTop: 16,
  },
});

//This is an example code for Bottom Navigation//

import React from 'react';

//import react in our code.

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

//import all the basic component we have used

export default class SettingsScreen extends React.Component {

//Setting Screen to show in Setting Option

render() {

return (

<Text style={{ marginTop: 50, fontSize: 25 }}>Setting!</Text>

<View

style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

<TouchableOpacity

style={styles.button}

onPress={() => this.props.navigation.navigate('Home')}>

</TouchableOpacity>

<TouchableOpacity

style={styles.button}

onPress={() => this.props.navigation.navigate('Details')}>

<Text>Open Detail Screen</Text>

</TouchableOpacity>

<TouchableOpacity

style={styles.button}

onPress={() => this.props.navigation.navigate('Profile')}>

<Text>Open Profile Screen</Text>

</TouchableOpacity>

</View>

);

}

const styles = StyleSheet.create({

button: {

alignItems: 'center',

backgroundColor: '#DDDDDD',

padding: 10,

width: 300,

marginTop: 16,

});

To Run the React Native App

Open the terminal again and jump into your project using.

cd ProjectName

To run the project on an Android Virtual Device or on real debugging device

react-native run-android

or on the iOS Simulator by running

react-native run-ios (macOS only).

Android

(Home menu with details screen in it)

IOS

(Home menu with details screen in it)

Android

(Setting menu with detail and profile screens in it)

IOS

(Setting menu with detail and profile screens in it)

In this example, we have used Ionicons for the bottom navigation tab icons. If you want to use the icons from the local directory of your project then please visit our next post on Bottom Navigation with Navigation Icon from Local Directory. This will be a similar example but the bottom tab icon will be from the project’s local directory.

That was the React Native Bottom Navigation. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

14 thoughts on “How to Make React Native Bottom Navigation with Latest Navigation V. 4+”

Nilesh
December 20, 2018 at 11:30 pm | Reply
Please how to home page diffrent 2 button click go to diffrent bottom tab bar example add please ….
- Snehal Agrawal
  December 20, 2018 at 11:57 pm | Reply
  Hello Nilesh,
  you can download the project files from here.
  https://we.tl/t-mKYf3nIAcL
  You can also see the snack here
  https://snack.expo.io/SJjbtF-xE?session_id=snack-session–mKzbXCcE
  Process:
  1. You just need to make a React Native project.
  2. Replace app.js and place pages folder from the downloaded files.
  3. Add the react-navigation in the project (This Example will help you https://aboutreact.com/react-native-navigation-router/).
  and RUN the project.
Peter Fischer
February 25, 2019 at 9:36 am | Reply
Hi, I have created my own icons and want to use them instead of IonIcons. I have stored them in a folder called assets. I don’t have to import them. But I can not figure out how to implement them in the defaultNavigationOptions.
Can you please show me the way.
Thank you
Peter
Juan David Reyes
March 7, 2019 at 1:42 am | Reply
Great tutorial, thanks for your time and knowledge shared!
If someone is using Expo on the section *Linking of Dependencies*, there is a different command ‘react-native link react-native-gesture-handler’. Don’t know if it also applies to the plain use of React Native.
Gracias one more time 🙂
- Snehal Agrawal
  March 7, 2019 at 9:56 pm | Reply
  Thank you for your words. 🙂
Kumar Kundan
April 26, 2019 at 2:28 pm | Reply
How to download this project. Your earlier link in comment is not working!!!
- Snehal Agrawal
  April 27, 2019 at 8:48 am | Reply
  Hey hi,
  You can see snack over there https://snack.expo.io/SJjbtF-xE?session_id=snack-session–mKzbXCcE
  Please download the code from there and can see the output in runtime.
Alan Rodrigo Moraes Rocha
July 8, 2019 at 12:15 am | Reply
Hello, how do I put a floating action button on the tab navigation?
- Snehal Agrawal
  July 15, 2019 at 1:07 am | Reply
  There is not a way to put a floating action button on a single place instead you have to make a different component for that and have to include that component into all screens.
nilesh
September 14, 2019 at 11:54 am | Reply
hi sir its good way or not you say , beacuse now reacrt-navigation 4.0 nd 3 but you are working on 2. somthing so very low version react navigation on working its not working my system plzz upgread code on this link
You can also see the snack here
https://snack.expo.io/SJjbtF-xE?session_id=snack-session–mKzbXCcE
Akula
September 27, 2019 at 8:39 am | Reply
I am new to React Native. After seeing your tutorial, I gained so much knowledge. Great Tutorial sir.
- Snehal Agrawal
  September 27, 2019 at 7:44 pm | Reply
  Welcome, Nice to hear that 🙂
yasir wahid
October 17, 2019 at 7:14 pm | Reply
Hey i’ve followed each step but im getting error ‘TypeError:null is not an object(evaluating ‘_ReanimatedModule.default.configureProps)’
PS:i have installed and linked react-native-reanimated and all the packages it need
i am using react native cli
- Snehal Agrawal
  October 21, 2019 at 8:09 pm | Reply
  Can you please share the version that you are using for all the installed items?
  You can also see https://github.com/react-native-community/react-native-tab-view/issues/843

How to Make React Native Bottom Navigation with Latest Navigation V. 4+

To Make a React Native App

Installation of Dependencies

Linking of Dependency

CocoaPods Installation

Project File Structure

App.js

DetailsScreen.js

HomeScreen.js

ProfileScreen.js

SettingsScreen.js

To Run the React Native App

Android

(Home menu with details screen in it)

IOS

(Home menu with details screen in it)

Android

(Setting menu with detail and profile screens in it)

IOS

(Setting menu with detail and profile screens in it)

14 thoughts on “How to Make React Native Bottom Navigation with Latest Navigation V. 4+”

Leave a Comment Cancel reply

All Post Updated for React Native V0.61+

API

React Navigation

Material Design

Local Data Access

Social Integration

Date Time

Chart

Libraries