React Native: Top Tabs Navigator

Top Tabs Navigator is 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. Routes tab screen components for each route are mounted immediately.

Installation Top Tabs Navigator

To use this tab navigator, you want to ensure that you have @react-navigation/native and its dependencies.

npm install @react-navigation/material-top-tabs
Or
yarn add @react-navigation/material-top-tabs

Installing dependencies into a bare React Native project

npm install react-native-tab-view react-native-pager-view
Or
yarn add react-native-tab-view react-native-pager-view

React Native Top Tabs Navigation Example:
Now create new “screens” directory in application root directory.

Then you need to create some screen files like HomeScreen.js, LoginScreen.js, RegisterScreen.js, AboutScreen.js and ProfileScreen.js etc. in your screens directory. Or If you have already some screens than skip new screen creation.

Example HomeScreen:

import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet, Text, View, Button } from 'react-native';

const HomeScreen = ({ navigation }) => {
    return (
        <SafeAreaView style={styles.safeAreaContainer}>
            <ScrollView contentContainerStyle={styles.scrollView}>
                <View style={styles.mainContainer}>
                    <View style={styles.viewContainer}>
                        <Text style={{fontSize: 16, fontWeight: 'bold', marginBottom: 20}}>Welcome to ExtendFeature demo APP</Text>
                        <Button title="Go to Login" onPress={() => navigation.navigate('Login')} />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    safeAreaContainer: {
        flex: 1,
        backgroundColor: '#ffffff',
    },
    scrollView: {
         flexGrow: 1,
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'flex-start',
    },
    scrollViewModal: {
        flexGrow: 1,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    mainContainer: {
         flex: 1,
         width: '100%',
         backgroundColor: '#e7ebf1',
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
    },
    viewContainer: {
         flex: 1,
         width: '100%',
         justifyContent: 'center',
         alignItems: 'center',
    },
});

export default HomeScreen;

Now, open App.tsx file form React Native application directory and add following code in your App file.

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

//Import some screens
import HomeScreen from './screens/HomeScreen';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import AboutScreen from './screens/AboutScreen';
import ProfileScreen from './screens/ProfileScreen';

// Initialized all Navigator
const TopTab = createMaterialTopTabNavigator();

export function AppTopTabsNavigation(){
    return (
        <TopTab.Navigator initialRouteName="Login">
            <TopTab.Screen name="Home" component={HomeScreen} options={{ tabBarLabel: 'Home' }} />
            <TopTab.Screen name="Login" component={LoginScreen} options={{ tabBarLabel: 'Login' }} />
            <TopTab.Screen name="Register" component={RegisterScreen} options={{ tabBarLabel: 'Register' }} />
            <TopTab.Screen name="About" component={AboutScreen} options={{ tabBarLabel: 'About' }} />
            <TopTab.Screen name="Profile" component={ProfileScreen} options={{ tabBarLabel: 'Profile' }} />
        </TopTab.Navigator>
    );
}

const App = () => {
  return (
        <NavigationContainer>
            <AppTopTabsNavigation />
        </NavigationContainer>
  );
}

export default App;

Done, now run your app using following command:

npx react-native run-android

Your app is ready with top tabs navigation. More details Material Top Tab Navigator click here.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.

Installation Top Tabs Navigator

Related Articles

Related Articles

Recent Posts

Categories

Important Links