Bottom Tab Navigation in React Native

Bottom Tab Navigation displays multiple navigation options at the bottom of the application screen.

Each tab normally represents a different screen or section.

Home
Courses
Profile
Settings

Users can tap a tab to switch between these sections.

Bottom tabs are useful when an application has several primary sections that users need to access regularly.

• Home
• Search
• Courses
• Profile
• Settings

They provide quick access without requiring the user to open another menu.

React Navigation provides a bottom tab navigator through a separate package.

npm install @react-navigation/bottom-tabs

The core React Navigation package should already be installed in the project.

import {
    NavigationContainer
} from '@react-navigation/native';

The NavigationContainer contains the application's navigation structure.

import {
    createBottomTabNavigator
} from '@react-navigation/bottom-tabs';

This function is used to create a bottom tab navigator.

const Tab =
    createBottomTabNavigator();

The Tab object provides the components required to create the tab navigation structure.

<Tab.Navigator>

    {/* Tab Screens */}

</Tab.Navigator>

The Tab.Navigator contains the screens that will appear as tabs.

<Tab.Screen
    name="Home"
    component={HomeScreen}
/>

Tab.Screen registers a screen as one of the available tabs.

<Tab.Navigator>

    <Tab.Screen
        name="Home"
        component={HomeScreen}
    />

    <Tab.Screen
        name="Courses"
        component={CoursesScreen}
    />

    <Tab.Screen
        name="Profile"
        component={ProfileScreen}
    />

</Tab.Navigator>

The application now has three bottom tabs.

import React from 'react';

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

export default function HomeScreen() {

    return (

        <View>

            <Text>
                Home Screen
            </Text>

        </View>

    );

}

This component can be registered as the Home tab.

import React from 'react';

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

export default function CoursesScreen() {

    return (

        <View>

            <Text>
                Courses Screen
            </Text>

        </View>

    );

}

This component can be registered as the Courses tab.

import React from 'react';

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

export default function ProfileScreen() {

    return (

        <View>

            <Text>
                Profile Screen
            </Text>

        </View>

    );

}

This component can be registered as the Profile tab.

const Tab =
    createBottomTabNavigator();

export default function App() {

    return (

        <NavigationContainer>

            <Tab.Navigator>

                <Tab.Screen
                    name="Home"
                    component={HomeScreen}
                />

                <Tab.Screen
                    name="Courses"
                    component={CoursesScreen}
                />

                <Tab.Screen
                    name="Profile"
                    component={ProfileScreen}
                />

            </Tab.Navigator>

        </NavigationContainer>

    );

}

Users can switch between tabs by tapping the corresponding tab at the bottom of the screen.

Home
   ↓
Courses
   ↓
Profile

The selected tab displays its associated screen.

The initialRouteName option can specify which tab should be selected when the application starts.

<Tab.Navigator
    initialRouteName="Home"
>

    <Tab.Screen
        name="Home"
        component={HomeScreen}
    />

    <Tab.Screen
        name="Courses"
        component={CoursesScreen}
    />

</Tab.Navigator>

The options property can be used to customize the tab label.

<Tab.Screen
    name="Courses"
    component={CoursesScreen}
    options={{
        title: 'My Courses'
    }}
/>

The title can be changed without changing the route name.

The tab bar label can be customized using tabBarLabel.

<Tab.Screen
    name="Profile"
    component={ProfileScreen}
    options={{
        tabBarLabel: 'My Profile'
    }}
/>

This changes the text displayed in the tab bar.

Tab icons can be configured using the tabBarIcon option.

<Tab.Screen
    name="Home"
    component={HomeScreen}
    options={{
        tabBarIcon: ({
            focused,
            color,
            size
        }) => (
            <Text>
                🏠
            </Text>
        )
    }}
/>

In a real application, an icon library can be used instead of an emoji.

The tab bar can provide different visual states for the selected and unselected tabs.

<Tab.Navigator
    screenOptions={{
        tabBarActiveTintColor: 'blue',
        tabBarInactiveTintColor: 'gray'
    }}
>

The active tab can therefore be visually distinguished from inactive tabs.

The tab bar can be configured through screen options when a different navigation structure requires it.

For example, an application may use a stack navigator for detailed screens and keep the bottom tabs for the main application sections.

Home
  |
  └── Details

This is commonly achieved by combining navigators.

Bottom tabs and stack navigation can be combined.

Bottom Tabs
    |
    ├── Home Stack
    │     ├── Home
    │     └── Details
    │
    ├── Courses
    │
    └── Profile

This structure is useful for real-world applications.

Parameters can also be passed to screens through navigation.

navigation.navigate(
    'Profile',
    {
        userId: 101
    }
);

The destination screen can read the parameter through its route object.

Bottom tabs are commonly suitable for applications such as:

• Education apps
• Shopping apps
• Social media apps
• Banking apps
• Fitness apps
• News apps
• Business apps

The tabs should normally represent the main sections of the application.

An education application could use:

Home
Courses
Assignments
Profile

Each tab can open a different section of the application.

A shopping application could use:

Home
Categories
Cart
Orders
Profile

This allows users to quickly access the most important shopping sections.

• Forgetting to install the bottom-tabs package.
• Forgetting NavigationContainer.
• Using duplicate route names.
• Adding too many tabs.
• Using unclear tab labels.
• Not providing useful active and inactive states.
• Using inappropriate icons.
• Creating complicated nested navigation unnecessarily.

import React from 'react';

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

import {
    NavigationContainer
} from '@react-navigation/native';

import {
    createBottomTabNavigator
} from '@react-navigation/bottom-tabs';

const Tab =
    createBottomTabNavigator();

function HomeScreen() {

    return (

        <View>

            <Text>
                Home Screen
            </Text>

        </View>

    );

}

function CoursesScreen() {

    return (

        <View>

            <Text>
                Courses Screen
            </Text>

        </View>

    );

}

function ProfileScreen() {

    return (

        <View>

            <Text>
                Profile Screen
            </Text>

        </View>

    );

}

export default function App() {

    return (

        <NavigationContainer>

            <Tab.Navigator
                initialRouteName="Home"
                screenOptions={{
                    tabBarActiveTintColor:
                        'blue',
                    tabBarInactiveTintColor:
                        'gray'
                }}
            >

                <Tab.Screen
                    name="Home"
                    component={HomeScreen}
                />

                <Tab.Screen
                    name="Courses"
                    component={CoursesScreen}
                />

                <Tab.Screen
                    name="Profile"
                    component={ProfileScreen}
                />

            </Tab.Navigator>

        </NavigationContainer>

    );

}

• Use tabs for the main sections of the application.
• Keep the number of tabs manageable.
• Use clear and short labels.
• Use familiar icons when appropriate.
• Keep active and inactive states visually clear.
• Keep navigation consistent across screens.
• Combine tabs with stack navigation when required.
• Test the tab navigation on different screen sizes.

Create React Native Project
          ↓
Install React Navigation
          ↓
Install Bottom Tabs
          ↓
Create Screen Components
          ↓
Create NavigationContainer
          ↓
Create Bottom Tab Navigator
          ↓
Register Tab Screens
          ↓
Set Initial Tab
          ↓
Customize Labels
          ↓
Add Icons
          ↓
Configure Active/Inactive States
          ↓
Combine with Stack Navigation if Required
          ↓
Test All Tabs

Bottom Tab Navigation is useful when an application has several important sections that users need to access quickly. It can also be combined with Stack Navigation to build complete mobile application navigation systems.