How do I use nested navigators in React Navigation v6?

How do I use nested navigators in React Navigation v6?

To use nested navigators in React Navigation v6, you can create a stack navigator and then nest a tab navigator inside it.

Can you show me a code example of that?

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 <Text>Home Screen</Text>;
}

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

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

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Main" component={TabNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

What if I want to add more screens to the stack?

You can easily add more screens to the stack by adding more Stack.Screen components inside the Stack.Navigator. Just make sure to import the new screen components.