Tab Navigator

The Tab Navigator is tabbed at the bottom of the screen. It is used to switch between different route screens

Bottom Tabs Navigator :

The tab bar is fixed to the bottom of the screen. Each tab is linked to a screen and displays an active state when selected.

By using bottom tab navigator we have to install following package in project:

npm install @react-navigation/bottom-tabs

Example:

1. Create HomeScreen and ProfileScreen components folder in src folder with following code:

import React from 'react';
import {Text, View} from 'react-native';

const HomeScreen = () => {
  return (
    <View>
      <Text>Home screen</Text>
    </View>
  );
};

export default HomeScreen;

import React from 'react';
import {Text, View} from 'react-native';

const ProfileScreen = () => {
  return (
    <View>
      <Text>Profile Screen </Text>
    </View>
  );
};

export default ProfileScreen;

2. Import bottom tab library with creating function for HomeScreen and ProfileScreen component in app.js file

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {HomeScreen} from './src/screens/HomeScreen';
import {ProfileScreen} from './src/screens/ProfileScreen';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const MyTab = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
};

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

export default App;