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.
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.