How can I implement nested navigators in React Navigation for Android?

How can I implement nested navigators in React Navigation for Android?

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

Can you show me a code example for that?

Sure! Here's a simple example:

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

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

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Tab1" component={Tab1Screen} />
      <Tab.Screen name="Tab2" component={Tab2Screen} />
    </Tab.Navigator>
  );
}

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

This code sets up a stack navigator with a home screen that contains nested tab navigators.

What if I want to pass parameters to the nested screens?

You can pass parameters to nested screens using the navigation prop. For example, when navigating to a tab screen, you can do:

navigation.navigate('Tab1', { paramName: 'value' });

Then, in your Tab1Screen, you can access the parameters using route.params.paramName.