How do I set up nested navigators in React Navigation?

How do I set up nested navigators in React Navigation?

To set up nested navigators in React Navigation, you first need to create your main navigator and then nest other navigators inside it.

Can you show me a code example?

Sure! Here's a simple example:

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 HomeScreen() {
  return <View><Text>Home Screen</Text></View>;
}

function SettingsScreen() {
  return <View><Text>Settings Screen</Text></View>;
}

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

This sets up a bottom tab navigator with two screens.

What if I want to add a stack navigator inside one of the tabs?

You can nest a stack navigator inside a tab by creating a stack component for that tab. Here's how:

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

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

This way, you can navigate to the Profile screen from the Settings tab.