How to Use Nested Navigator in React Native: Simple Guide

In React Native, you use nested navigators by placing one navigator inside another, such as a StackNavigator inside a TabNavigator. This allows separate navigation flows within different parts of your app, managed independently but working together seamlessly.

Syntax

To create a nested navigator, you define one navigator inside a screen of another navigator. For example, a Stack.Navigator can be nested inside a Tab.Screen. Each navigator manages its own set of screens.

• Parent Navigator: The main navigator controlling top-level navigation.
• Child Navigator: The nested navigator inside a screen of the parent.
• Screen Components: Screens registered inside each navigator.

javascript

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

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function StackScreens() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ScreenA" component={ScreenA} />
      <Stack.Screen name="ScreenB" component={ScreenB} />
    </Stack.Navigator>
  );
}

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

Example

This example shows a bottom tab navigator with two tabs: "Home" and "ProfileStack". The "ProfileStack" tab contains a stack navigator with two screens: "Profile" and "Settings". You can navigate inside the stack without leaving the tab.

javascript

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

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

function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile Screen</Text>
      <Button title="Go to Settings" onPress={() => navigation.navigate('Settings')} />
    </View>
  );
}

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

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function ProfileStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

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

Output

App shows a bottom tab bar with two tabs: Home and ProfileStack. Selecting ProfileStack shows the Profile screen with a button. Pressing the button navigates to the Settings screen inside the same tab.

Common Pitfalls

Common mistakes when using nested navigators include:

• Not wrapping the entire app in NavigationContainer, which breaks navigation.
• Trying to navigate between nested navigators without proper screen names or navigation props.
• Confusing screen names between parent and child navigators, causing navigation to fail.
• Forgetting to pass navigation prop to components inside nested navigators.

Always check your navigator hierarchy and screen names carefully.

javascript

/* Wrong: Navigating to a nested screen without specifying the nested navigator */
navigation.navigate('Settings'); // Fails if 'Settings' is inside a nested stack

/* Right: Navigate using nested navigator path */
navigation.navigate('ProfileStack', { screen: 'Settings' });

Quick Reference

• Wrap your app in NavigationContainer once at the root.
• Define nested navigators as components and use them as screens in parent navigators.
• Use navigation.navigate('Parent', { screen: 'Child' }) to navigate to nested screens.
• Keep screen names unique or use nested navigation paths to avoid conflicts.

Key Takeaways

Wrap your app in NavigationContainer once at the root for navigation to work.

Nest navigators by using one navigator as a screen inside another navigator.

Use navigation.navigate with nested screen names to move between nested screens.

Keep screen names unique or use nested paths to avoid navigation conflicts.

Test navigation flows carefully to catch common mistakes early.