react-nativereact-navigationnavigation-drawer

React Native - How to navigate to a specific screen in a child stack navigator from a parent drawer navigator


I have not been able to achieve this for days now.

My topmost navigator is a DrawerNavigator and it has multiple links to the a particular child Stack navigator but also to other screens.

This is my parent drawer navigator:

const Drawer = createDrawerNavigator();

export default function MainLayout() {
    ...

    return (
        <NavigationContainer>
            <Drawer.Navigator initialRouteName="Inicio" screenOptions={{
                headerShown: false,
                drawerPosition: "right",
                drawerType: "slide",
                drawerStyle: {
                    backgroundColor: '#01414d'
                },
                drawerInactiveTintColor: '#fff',
                drawerActiveTintColor: '#fff',
                drawerActiveBackgroundColor: '#7fa091',
                drawerLabelStyle: {
                    fontFamily: "Figtree-SemiBold",
                    fontSize: 16,
                    color: '#fff'
                },
            }}>
                <Drawer.Screen name="Inicio" component={PublicLayout} initialParams={{ route: 'Home' }} options={{
                    drawerIcon: ({ color }) => (
                        <Text style={[css.icon, { color: color, marginRight: -23, width: 20, textAlign: 'center' }]}>{" "}{FontAwesome.fa_house}</Text>
                    )
                }} />
                <Drawer.Screen name="Contacto" component={PublicLayout} initialParams={{ route: 'Contact' }} options={{
                    drawerIcon: ({ color }) => (
                        <Text style={[css.icon, { color: color, marginRight: -23, width: 20, textAlign: 'center' }]}>{" "}{FontAwesome.fa_phone_office}</Text>
                    )
                }} />
                <Drawer.Screen name="Mi cuenta" component={PrivateLayout} options={{
                    drawerIcon: ({ color }) => (
                        <Text style={[css.icon, { color: color, marginRight: -23, width: 20, textAlign: 'center' }]}>{" "}{FontAwesome.fa_user}</Text>
                    )
                }} />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

And this is my child StackNavigator:

const Stack = createNativeStackNavigator();

export default function PublicLayout({ route, navigation }) {
    return (
        <Stack.Navigator initialRouteName="Home" screenOptions={{ header: Header }}>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Vehicle" component={VehicleScreen} />
            <Stack.Screen name="Financing" component={FinancingScreen} />
            <Stack.Screen name="Contact" component={ContactScreen} />
        </Stack.Navigator>
    );
}

I have tried custom drawer items but seems like a very convoluted way of doing things...

I tried setting the initialRouteName to the "route" parameter i send and it doesnt work.

I have been banging my head against this problem for a while, I could really use a hand with this.


Solution

  • It seems i have misunderstood the purpose of the Drawer.Screen items, while they provide a quick way to add items to the menu, what I need can only be achievable through the use of Custom Drawer Items.

    Thanks @satya164 for the answer.