Tab Navigator

Tab-Based Navigation

Tab navigation is the pattern you see at the bottom of most mobile apps — Instagram, Twitter, YouTube all use it. Users tap tabs at the bottom to switch between main sections of the app. Each tab maintains its own navigation history, so going back in one tab doesn't affect the others.

React Navigation provides the BottomTabNavigator specifically for this pattern. It's the most common way to structure your app's main navigation.

Setting Up Tabs

Here's how to create a bottom tab navigator:

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

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

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24 }}>Profile</Text>
    </View>
  );
}

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

const Tab = createBottomTabNavigator();

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

export default App;

Install the bottom tabs package with npm install @react-navigation/bottom-tabs. The setup is similar to stack navigator — wrap in NavigationContainer, create the navigator, and define your screens. Each screen automatically gets a tab at the bottom.

Customizing Tabs

You can customize the appearance of tabs with icons, colors, and custom components.

<Tab.Navigator
  screenOptions={{
    tabBarActiveTintColor: '#2196F3',
    tabBarInactiveTintColor: 'gray',
    headerShown: false,
  }}
>
  <Tab.Screen
    name="Home"
    component={HomeScreen}
    options={{
      tabBarIcon: ({ color, size }) => (
        <Text style={{ fontSize: size, color }}>🏠</Text>
      ),
    }}
  />
</Tab.Navigator>

The tabBarIcon option lets you render any component as the tab icon. You receive the current color and size, so you can style your icon to match the tab state. Most apps use an icon library like react-native-vector-icons for proper icons.

Tab Events

Sometimes you need to respond to tab changes — maybe to refresh data when a tab is selected or to track analytics. Tab navigators provide events for this.

<Tab.Screen
  name="Home"
  component={HomeScreen}
  listeners={{
    tabPress: (e) => {
      console.log('Home tab pressed');
    },
    focus: () => {
      console.log('Home tab focused');
    },
  }}
/>

The tabPress event fires when the tab is tapped, and focus fires when the tab becomes active. These are useful for refreshing data, showing notifications, or preventing navigation based on certain conditions.