React Native Create Custom Bottom Tab Bar Navigator Example

In our previous tutorial we have learn about createBottomTabNavigator() component of React Navigation version 5.x which is the latest version of react navigation. But as per user requirement some times developer wants to make their own customized bottom tab bar navigator. Custom tab bar navigator is completely user manageable and designed by application developer but performs like real createBottomTabNavigator() component. So in this tutorial we would design React Native Create Custom Bottom Tab Bar Navigator in Android iOS Example Tutorial.

Contents in this project React Native Create Custom Bottom Tab Bar Navigator in Android iOS Example Tutorial:

1. Before getting started with App coding first step is to install the React Navigation library into our current react native project. You’ll think like the React Navigation is the Root tree of multiple components and createBottomTabNavigator() and other libraries is like fruits on the tree. So it is must to install the React Navigation first. So open your react native project Root directory in Command Prompt in WINDOWS and Terminal in MAC and execute below command.

Screenshot:

Screenshot after done installation:

2. On the next step we’ll install 5 libraries together in order to use React Navigation properly in all devices. The library names are react-native-gesture-handler, react-native-reanimated, react-native-screens and react-native-safe-area-context and @react-native-community/masked-view NPM packages.

Screenshot:

Screenshot after done installation:

3. On the next step we’ll install the createBottomTabNavigator() component in our react native project. This step is must to use the Bottom Tab Bar navigation in react native.

Screenshot:

Screenshot after done installation:

4. Now your project is successfully configured and linked with all the libraries for Android platform but for iOS users we have execute another Pod command to link all the downloaded libraries to react native iOS project.

Note: This step is only for iOS users, If you’re creating App for only Android then there is no need to execute this step.

Screenshot of MAC Terminal :

Screenshot of MAC after executing above command:

Now your project is ready to rock and roll. Its time to start coding for your react native application.

5. Start Coding for Application:

1. Open your project’s main App.js file and import Text, View, StyleSheet, TouchableOpacity, NavigationContainer and createBottomTabNavigator component.

2. I’m creating 3 different screens in this tutorial, Each screen has their different background color layout. So Creating a functional component named as Screen_1(). This is our First screen for application.

Screen 1 :

3. Creating functional component named as Screen_2(). This is our Second screen for application.

Screen 2:

4. Creating function component named as Screen_3(). This is our third screen for application.

Screen 3:

5. Creating another functional component named as CustomTabBar() with Props argument inside it. This is our Custom Bottom Tab Navigator Tab Bar for project.

Explanation: I’m creating 3 functions inside the CustomTabBar() named as navigateToFirstScreen, navigateToSecondScreen and navigateToThirdScreen with Screen names along with it. We would call these functions on button Click event and navigate to next activities.

Custom Bottom Tab Bar Navigator Screenshot:

6. Creating a createBottomTabNavigator() object named as Tab . We would use this object to define all the Tab Navigator screens.

7. Creating a function named as AllTabs(). Inside this function we would first call our Custom Tab Bar with Prop and then define Tab.Screen method and call each Screen here.

8. Creating our main Export default function App with NavigationContainer component and inside the NavigationContainer we would call our AllTabs component to complete our Bottom Tab Navigator.

9. Creating Style.

10. Complete Source Code for App.js file:

Screenshots in Android Device:

React Native Create Custom Bottom Tab Bar Navigator Example React Native Create Custom Bottom Tab Bar Navigator ExampleScreenshots in iOS Device:

React Native Create Custom Bottom Tab Bar Navigator Example

Leave a Reply

Your email address will not be published.