How to Use Tab Navigator in React Native: Simple Guide

To use a Tab Navigator in React Native, install @react-navigation/bottom-tabs and @react-navigation/native, then create a tab navigator using createBottomTabNavigator(). Wrap it inside a NavigationContainer and define screens as tabs for easy navigation.

Syntax

The basic syntax involves importing createBottomTabNavigator from @react-navigation/bottom-tabs and NavigationContainer from @react-navigation/native. You create a tab navigator instance, then define each tab screen inside it.

• NavigationContainer: Wraps your navigator and manages navigation state.
• createBottomTabNavigator(): Creates the tab navigator object.
• Tab.Screen: Defines each tab with a name and component.

javascript

import { NavigationContainer } from '@react-navigation/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="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

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

Output

App with bottom tab navigation showing two tabs: Home and Settings.

Example

This example shows a simple React Native app with two tabs: Home and Settings. Each tab displays a screen with text. The tabs appear at the bottom and let users switch screens by tapping.

javascript

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>
  );
}

Output

App UI with bottom tabs labeled 'Home' and 'Settings'. Tapping tabs switches the displayed screen text accordingly.

Common Pitfalls

Common mistakes when using tab navigator include:

• Not wrapping the navigator inside NavigationContainer, causing navigation to fail.
• Forgetting to install required packages like @react-navigation/native and @react-navigation/bottom-tabs.
• Not importing or defining screen components correctly.
• Using class components without hooks or proper navigation props.

javascript

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

const Tab = createBottomTabNavigator();

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

/* Right: Wrap with NavigationContainer */
import { NavigationContainer } from '@react-navigation/native';

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

Quick Reference

Tab Navigator Quick Tips:

• Always wrap your navigator in NavigationContainer.
• Install dependencies: npm install @react-navigation/native @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context react-native-gesture-handler.
• Use functional components with hooks for best compatibility.
• Customize tabs with options like icons and labels inside Tab.Screen.

Key Takeaways

Wrap your tab navigator inside NavigationContainer to manage navigation state.

Use createBottomTabNavigator from @react-navigation/bottom-tabs to create tabs.

Define each tab with Tab.Screen specifying a name and component.

Install all required React Navigation dependencies before using the navigator.

Common errors include missing NavigationContainer and incorrect screen imports.