Tab Navigator (Bottom Tabs) in React Native

Introduction

Bottom tab navigation helps users switch between main sections of an app easily by tapping icons at the bottom.

When your app has 3 to 5 main screens that users switch between often.

When you want a simple way for users to explore different parts of your app.

When you want to keep navigation visible and accessible at all times.

When you want to show icons and labels for main app areas.

When you want a consistent navigation bar across many screens.

Syntax

React Native

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

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

Wrap your tab navigator inside NavigationContainer to manage navigation state.

Each Tab.Screen needs a unique name and a component to render.

Examples

Basic bottom tab navigator with two tabs: Home and Profile.

React Native

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

const Tab = createBottomTabNavigator();

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

Customize tab colors for active and inactive tabs.

React Native

<Tab.Navigator screenOptions={{ tabBarActiveTintColor: 'tomato', tabBarInactiveTintColor: 'gray' }}>
  <Tab.Screen name="Feed" component={FeedScreen} />
  <Tab.Screen name="Messages" component={MessagesScreen} />
</Tab.Navigator>

Change the label text shown under the tab icon.

React Native

<Tab.Navigator>
  <Tab.Screen
    name="Settings"
    component={SettingsScreen}
    options={{ tabBarLabel: 'Config' }}
  />
</Tab.Navigator>

Sample App

This app shows two tabs at the bottom: Home and Settings. Tapping each tab changes the screen content.

React Native

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

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings Screen</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Important Notes

Make sure to install @react-navigation/native and @react-navigation/bottom-tabs packages before using.

Use icons with tabs by adding tabBarIcon option inside options.

Bottom tabs are best for main app sections, not for deep navigation inside a section.

Summary

Bottom tab navigator shows tabs at the bottom for easy switching between main screens.

Wrap tabs inside NavigationContainer and define each tab with Tab.Screen.

You can customize labels, colors, and icons for better user experience.