How to Create Material Top Tab Navigation in React Native?

May 28, 2022 . Admin

Hi Guys,

This tutorial will give you example of how to create material top tab navigation in react native. you can understand a concept of how to implement material top tab navigation in react native. this example will help you react native material top tab navigation example. step by step explain material top navigation example in react native. You just need to some step to done how to use material top tab navigation in react native.

A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the tabs or swiping horizontally. Transitions are animated by default. Screen components for each route are mounted immediately.

In this example, there are 3 screens (Chats, Status, and Calls) defined using the Tab.Screen component. Similarly, you can define as many screens as you like.

Step 1: Download Project

In the first step run the following command to create a project.

expo init TopTabNavigation
Step 2: Installation and Setup

First, you need to install them in your project:

npm install @react-navigation/native     

after all you need to install metarial top tab navigation:

npm install @react-navigation/material-top-tabs react-native-tab-view
Step 3: App.js

Now, you need to wrap the whole app in NavigationContainer. Usually you'd do this in your entry file, such as App.js:

In this step, You will open the App.js file and put the code.

import React from 'react';
import { StyleSheet, Text, View, StatusBar } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const ChatScreen = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>ChatScreen</Text>
        </View>
    );
}

const StatutScreen = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>StatutScreen</Text>
        </View>
    );
}

const CallScreen = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>CallScreen</Text>
        </View>
    );
}

const Tab = createMaterialTopTabNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen name='Chats' component={ChatScreen} />
                <Tab.Screen name='Status' component={StatutScreen} />
                <Tab.Screen name='Calls' component={CallScreen} />
            </Tab.Navigator>
            <StatusBar />
        </NavigationContainer>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 20,
    },
});

export default App;
Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output :

It will help you...

#React Native