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

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 option with options like Home and setting. Each screen has other navigation options too. So let’s get started.

This example will work for the React Navigation Version 3+. If you are using Version 2+ then please find the comments in the code for the suitable changes or can see our old post React Native Navigation Version 2+ for the help.

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

1	npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

1	react-native init ProjectName

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

Installation of Dependency

To use createBottomTabNavigator you need to install react-navigation package. To install this

Open the terminal and jump into your project

cd ProjectName

1	cd ProjectName

Run the following command

npm install react-navigation --save

1	npm install react-navigation --save

This command will copy all the dependencies into your node_module directory, You can find the directory in node_module the directory named react-navigation.

–save is optional, it is just to update the react-navigation dependancy in your package.json file.

Dependency Version for this Example Used is

"react-navigation": "3.0.9"

1	"react-navigation": "3.0.9"

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 react in our code.

import { Button, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
//import all the basic component we have used

import { Ionicons } from 'react-native-vector-icons';
//import Ionicons to show the icon for bottom options

//For React Navigation 2.+ import following
//import {createStackNavigator,createBottomTabNavigator} from 'react-navigation';

//For React Navigation 3.+ import following
import {
  createStackNavigator,
  createBottomTabNavigator,
  createAppContainer,
} from 'react-navigation';
//import createStackNavigator, createBottomTabNavigator, createAppContainer in our project

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 },
  },
  {
    //For React Navigation 2.+ change defaultNavigationOptions->navigationOptions
    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 },
  },
  {
    //For React Navigation 2.+ change defaultNavigationOptions->navigationOptions
    defaultNavigationOptions: {
      //Header customization of the perticular Screen
      headerStyle: {
        backgroundColor: '#42f44b',
      },
      headerTintColor: '#FFFFFF',
      title: 'Settings',
      //Header title
    },
  }
);

const App = createBottomTabNavigator(
  {
    //Defination of Navigaton bottom options
    Home: { screen: HomeStack },
    Settings: { screen: SettingsStack },
  },
  {
    //For React Navigation 2.+ change defaultNavigationOptions->navigationOptions
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
          // Sometimes we want to add badges to some icons.
          // You can check the implementation below.
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here!
        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: '#42f44b',
      inactiveTintColor: 'gray',
    },
  }
);
//For React Navigation 2.+ need to export App only
//export default App;
//For React Navigation 3.+
export default createAppContainer(App);

100

101

102

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

import React from 'react';

//import react in our code.

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

//import all the basic component we have used

import { Ionicons } from 'react-native-vector-icons';

//import Ionicons to show the icon for bottom options

//For React Navigation 2.+ import following

//import {createStackNavigator,createBottomTabNavigator} from 'react-navigation';

//For React Navigation 3.+ import following

import {

createStackNavigator,

createBottomTabNavigator,

createAppContainer,

} from 'react-navigation';

//import createStackNavigator, createBottomTabNavigator, createAppContainer in our project

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 },

{

//For React Navigation 2.+ change defaultNavigationOptions->navigationOptions

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 },

{

//For React Navigation 2.+ change defaultNavigationOptions->navigationOptions

defaultNavigationOptions: {

//Header customization of the perticular Screen

headerStyle: {

backgroundColor: '#42f44b',

headerTintColor: '#FFFFFF',

title: 'Settings',

//Header title

}

);

const App = createBottomTabNavigator(

{

//Defination of Navigaton bottom options

Home: { screen: HomeStack },

Settings: { screen: SettingsStack },

{

//For React Navigation 2.+ change defaultNavigationOptions->navigationOptions

defaultNavigationOptions: ({ navigation }) => ({

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

const { routeName } = navigation.state;

let IconComponent = Ionicons;

let iconName;

if (routeName === 'Home') {

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

// Sometimes we want to add badges to some icons.

// You can check the implementation below.

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

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

}

// You can return any component that you like here!

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

}),

tabBarOptions: {

activeTintColor: '#42f44b',

inactiveTintColor: 'gray',

}

);

//For React Navigation 2.+ need to export App only

//export default App;

//For React Navigation 3.+

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

1	cd ProjectName

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

react-native run-android

1	react-native run-android

or on the iOS Simulator by running

react-native run-ios (macOS only).

1	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)

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

How useful was this post?

Click on a star to rate us!

Average rating / 5. Vote count:

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Thanks for your feedback!

2 Comments on “How to Make React Native Bottom Navigation with Latest Navigation V. 3+”

Nilesh says:
December 20, 2018 at 11:30 pm
Please how to home page diffrent 2 button click go to diffrent bottom tab bar example add please ….
1. Snehal Agrawal says:
  December 20, 2018 at 11:57 pm
  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.

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

To Make a React Native App

Installation of Dependency

Dependency Version for this Example Used is

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)

How useful was this post?

We are sorry that this post was not useful for you!

About Snehal Agrawal

2 Comments on “How to Make React Native Bottom Navigation with Latest Navigation V. 3+”

Leave a Reply Cancel reply

To Make a React Native App

Installation of Dependency

Dependency Version for this Example Used is

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)

How useful was this post?

As you found this post useful...

We are sorry that this post was not useful for you!

Related Posts

Example of Bottom Sheet (Material Design) in React Native

React Native Card View for Android and IOS

React Native SnackBar

About Snehal Agrawal

2 Comments on “How to Make React Native Bottom Navigation with Latest Navigation V. 3+”

Leave a Reply Cancel reply