Bottom Tab Navigation in React Native Expo

How to implement bottom tab navigation using react native?

Hello, React Native Developers..!!

Navigation is an important part of Mobile app development. Different types of navigation are available to ease the surfing of users. Bottom tab navigation is one of the most prominent navigation, Instagram has bottom tab navigation and it’s really cool. Grab a cup of coffee and start the coding, as we are going to build a bottom tab navigation like Instagram. As it is a cross-platform so, it will work fine on both IOS and Android devices.

Let’s the hack Begin

Setup of React Native Expo

1. Make a folder

2. Open the terminal/command prompt

3. Write the command: expo init BottomNavigation

4. choose the Blank Template

5. Make Sure you have a good internet connection. Let the expo install all javascript dependencies. After the download completes. Navigate to the folder “BottomNavigation”.

You will see something like this.

Install the Dependencies For Bottom Tab Navigation

React Native has an awesome navigation package. It is free and open-source. Let’s install the packages in the same directory. write the command below.

1. npm install @react-navigation/native

2. npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

3. npm install @react-navigation/material-bottom-tabs

You will see something like this:

Now open the folder “BottomNavigation” in your favorite code editor. My personal favorite is VS Code. Now verify the installation of all the dependencies. Check the file package.json and verify it.

Open App.js and write the code below.

import React, { Component } from 'react'import HomeScreen from './Screens/Home';import NotificationScreen from './Screens/Notification';import ProfileScreen from './Screens/Profile';import SearchScreen from './Screens/Search';import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';import { NavigationContainer } from '@react-navigation/native';import  MaterialCommunityIcons  from 'react-native-vector-icons/MaterialCommunityIcons';const Tab = createMaterialBottomTabNavigator();

We want to make our Navigation tab look like Instagram. So, we need four Screens. Now, make a folder in the same directory and name it “Screens”. In the Screens Folder Make four javascript files.
Home.js, Profile.js, Notification.js, Search.js. Import these four files in App.js as shown above.

Open Home.js file and write the code below.

import React from 'react'import { View, Text } from 'react-native'function Home() {return (<View style={{alignItems:'center', justifyContent:'center', flex:1}}><Text>Home Screen</Text></View>)}export default Home

Copy and paste the same code in Notification.js, Profile.js, Search.js file and change the function name to Notification, Profile, Search, respectively. Also, change the export default part. After that, change the text “Home Screen” between <Text> tag in all the other javascript files. After doing all this let’s get back to App.js and write the following code.

export default function App() {return (<NavigationContainer><Tab.Navigator><Tab.Screen name="Home" component={HomeScreen} /><Tab.Screen name="Search" component={SearchScreen} /><Tab.Screen name="Notification" component={NotificationScreen} /><Tab.Screen name="Profile" component={ProfileScreen} /></Tab.Navigator></NavigationContainer>);}

And we are done.
Go back to the terminal and run the script.
npm start
Open your Expo App and scan the QR code. Something like this will appear on your mobile phone screen.

Bottom Tab Navigation in React Native

Let’s make it more dynamic. Update the code in App.js. We will update the text with Icon. Install one more dependency for this.

npm install react-native-vector-icons

Import this in App.js and update the code.

import  MaterialCommunityIcons  from 
'react-native-vector-icons/MaterialCommunityIcons';
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator labeled={false} barStyle={{ backgroundColor: 'black' }}
activeColor="white" >
<Tab.Screen name="Home" component={HomeScreen} //Home Screen
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={26}/>
),
}}/>
<Tab.Screen name="Search" component={SearchScreen} // Search Screen
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="magnify" color={color} size={26}/>
),
}}/>
<Tab.Screen name="Notification" component={NotificationScreen}
// Notification Screen
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="heart" color={color} size={26}/>
),
}}/>
<Tab.Screen name="Profile" component={ProfileScreen} // Profile Screen
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="account-circle" color={color}
size={26}/>
),
}}/>
</Tab.Navigator>
</NavigationContainer>
);
}

And here we go.
We almost hit the Instagram-like bottom tab look.

Instagram bottom tab navigator

We are done with this project here as it is simple javascript code and we used a few javascript frameworks Check out the full Github code Here.

Thank You.

Hello, My Name is Rohit Kumar Thakur. I am open to freelancing. I build react native projects and currently working on Python Django. Feel free to contact me (freelance.rohit7@gmail.com)