Top Tab Navigation in React Native Expo. Code-Tutorial 2021

How to add Top tab navigation using React Native Expo

Hello, React Native Developers..!!

Navigation is important for Mobile App development. We have already seen how to implement Bottom Tab Navigation and Drawer Navigation using React Native Expo. In this section, we will look after Tab Navigation implementation using React Native Expo. Many of the popular mobile applications use it. It works fine on both IOS and Android devices. So, grab a cup of coffee, and let’s begin the hack.

Photo by Christina @ wocintechchat.com on Unsplash

If you are looking for a video tutorial then it’s here:

Top Tab navigation in react native expo

Set-up and Installation of React Native Expo

1. Create a directory and initiate the project:
expo init TabNavigation
2. Select the blank template and proceed.
3. After the completion of the download, move to the folder “TabNavigation”.
4. Install the navigation packages using the following command:

npm install @react-navigation/native

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

npm install @react-navigation/material-top-tabs react-native-tab-view@².16.0

Something like this will appear on your terminal or command prompt:

We are done with the installation of npm packages. Let’s start with the code part.

Code of Top Tab Navigation

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

Open your project in your favorite text editor. I prefer VS code. Check the “package.json” file for the confirmation of installation of all the npm packages. Now open the App.js file and write the below code.

import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator style={{paddingTop:20}}>
<Tab.Screen name="Chat" component={ChatScreen} />
<Tab.Screen name="Contacts" component={ContactsScreen} />
<Tab.Screen name="Gallery" component={GalleryScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}

We want to make three screens, Chat Screen, Contact Screen, and Gallery Screen. So, we just add them to the Tab Screen component and wrapped them in Navigation Container. Here we declared three screens. So, we have to make those screens. Now, make a folder in the same directory and name the folder as “Screens”. Create three files in the “Screens” folder as Chat.js, Contacts.js, and Gallery.js.
Now add the following code in all the newly created files.

Chat.js

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

Contact.js

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

Gallery.js

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

Now add all these files in App.js

import ChatScreen from './Screens/Chat';
import ContactsScreen from './Screens/Contacts';
import GalleryScreen from './Screens/Gallery';

We are done with the coding part here. Now, run the server through the command npm start. Scan the QR code with your mobile devices and see the magic. It’s a simple javascript code.

You will see something like this.

Check out the Github Code here.

Thanks