How to add bottom tab navigation bar in react native

Introduction :

Bottom tab navigation adds buttons at the bottom of a screen. tapping these buttons will replace the current screen with a different screen. React navigation provides an easy way to implement bottom tab navigation in react native.

In this post, we will cover how to add bottom tab navigation with one example.

Installation :

You can install bottom tab navigation easily with npm or yarn :

npm install @react-navigation/bottom-tabs

or :

yarn add @react-navigation/bottom-tabs

How to use :

We can create one bottom tab navigator using createBottomTabNavigator that is available in react-navigation/bottom-tabs. The navigation component with all screens can be placed inside a NavigationContainer.

Start one basic application and add the below code to your home screen component :

import React from "react";
import { View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const RedScreen = () => {
  return <View style={{ flex: 1, backgroundColor: "red" }} />;
};

const BlueScreen = () => {
  return <View style={{ flex: 1, backgroundColor: "blue" }} />;
};

const BottomTab = createBottomTabNavigator();

export default function HomeScreen() {
  return (
    <NavigationContainer>
      <BottomTab.Navigator>
        <BottomTab.Screen name="RedScreen" component={RedScreen} />
        <BottomTab.Screen name="BlueScreen" component={BlueScreen} />
      </BottomTab.Navigator>
    </NavigationContainer>
  );
}

My home screen is HomeScreen.js. Here :

• We have two screens : RedScreen and BlueScreen.
• We have created one bottom tab navigator using createBottomTabNavigator
• The bottom navigator is placed inside NavigationContainer and screens are added inside the bottom tab Navigator.

If you run it, it will give the below result on an iOS device :

And on Android :

This is a basic implementation of react navigation tabs.