How can I implement nested navigation in React Navigation?

How can I implement nested navigation in React Navigation?

To implement nested navigation in React Navigation, you can use a combination of stack and tab navigators. First, create a stack navigator for your main screens, and then nest a tab navigator within one of those screens.

Can you show me a code example for 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 tab navigator?

You can easily add more screens by adding more Tab.Screen components within the TabNavigator. Just make sure to create the corresponding components for each new screen.