Nested navigators in React Native

Introduction

Nested navigators help organize app screens by grouping related pages inside smaller navigation flows. This keeps your app easy to manage and use.

When your app has multiple sections, each with its own set of screens.

If you want a tab bar with separate stacks of screens inside each tab.

When you want to combine drawer navigation with stack navigation.

To keep navigation logic simple by splitting it into smaller parts.

Syntax

React Native

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

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

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

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

Each navigator is a React component that manages its own screens.

You can nest navigators by using one navigator as a screen inside another.

Examples

This creates a stack navigator for profile-related screens.

React Native

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

This nests two stack navigators inside a tab navigator.

React Native

<Tab.Navigator>
  <Tab.Screen name="HomeStack" component={HomeStack} />
  <Tab.Screen name="ProfileStack" component={ProfileStack} />
</Tab.Navigator>

Sample App

This app has a bottom tab navigator with two tabs: Home and Settings. The Home tab contains a stack navigator with Home and Details screens. You can tap the button on Home to go to Details.

React Native

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

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

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

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

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

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

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

Important Notes

Remember to wrap your app in NavigationContainer once at the root.

Each nested navigator manages its own navigation history.

Use clear names for nested navigators to avoid confusion.

Summary

Nested navigators help organize complex apps by grouping screens.

You can put one navigator inside another as a screen component.

This makes navigation easier to manage and user-friendly.