Create Bottom Tab Navigation Navigator in React Native with Tab Icon

Bottom tab navigator also known as createBottomTabNavigator() in react native creates bottom tab navigation. The Bottom Tab Navigation Navigator creates the tabs navigation at the bottom of screen. Each tab can contain multiple activities screen inside them with proper navigation. Today we would learn about react navigation’s latest 3.x.x version createBottomTabNavigator bottom tab navigation with custom Tab Icons in Android & iOS React naive app. So each tab will show its own tab icon with optimal settings. So let’s get started 🙂 .

Note: We are using the individual activity JS file structure in current project so there are 5 different .JS files in our project. See the below file structure to understand.

Create Bottom Tab Navigation Navigator in React Native with Tab Icon Android iOS App:

1. Before getting started with coding we need to first install the 2 libraries in our current react native project. So open your react native project folder in Command Prompt or Terminal and execute below command to install React Navigation latest library.

Screenshot after successfully installed React Navigation library:

2. Install the React Native Gesture Handler library using below command. We need to install this library to properly work with react navigation.

Screenshot:

3. After done installing libraries we need to execute the react-native link command to index the gesture handler library in our current react native project.

3. Create a folder named as assets in your react native project.

4. Download the Home Icon and Settings Icon from below and paste into assets folder. There are 2 bottom navigation tab present in our tutorial.

5. Create another folder named as screens in your react native project. We would use this folder to manage individual Activity screen .js file.

6. Open your project’s App.js file and import createStackNavigator, createBottomTabNavigator, createAppContainer and Image component.

7. Import 4 Different activity screens from screens folder. We would create these classes below.

8. Create 2 constant named as HomeTab and SettingsTab using createStackNavigator with 2 and 3 Activities in App.js file. We would pass 2 and 3 activities in each tab. So above HomeTab contains 2 activitie screens and SettingsTab contain 3 activities inside them.

  • backgroundColor : Used to set Action title bar background color.
  • headerTintColor : Used to set header inside title text color.
  • title : Used to set title text of each TAB.

9. Creating a constant named as MainApp using createBottomTabNavigator and pass above created both HomeTab & SettingsTab init in App.js file.

  • activeTintColor : Used to set the active tab tint color.
  • inactiveTintColor : Used to set the inactive tint color of bottom tab.

10. Finally call the MainApp constant using createAppContainer with export default.

11. Complete source code for App.js file class.

11. Complete source code for Home_Activity file class present in screens folder.

12. Complete source code for Settings_Activity file class present in screens folder.

13. Complete source code for Details_Activity file class present in screens folder.

14. Complete source code for Profile_Activity file class present in screens folder.

Screenshots:

Create Bottom Tab Navigation Navigator

9 Comments

  1. How to pass data from Home to settings??

  2. How to change TabBarIcon Color???

    • Vignesh you need to use the Style prop in tabBarOptions for example :

      tabBarOptions: {
      activeTintColor: '#e91e63',
      labelStyle: {
      fontSize: 12,
      },
      style: {
      backgroundColor: 'blue',
      },
      }

  3. Cannot read property ‘Direction’ of undefined
    Module AppRegistry is not a registered callable module (calling runApplication)

  4. Thank you it works fine !!!

    Do you know if it’s possible to insert a translation code ? I use i18n to translate the app and I have no idea how to insert my code in the tabbar (my code looks like this ; {i18n.t(“world”)})

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *