I am trying to display Drawer Stack inside Stack Navigation after proceeding from Login but my Drawer stack hamburger menu is showing up but Drawer stack is not popping out the drawer nor display relevant items on my home screen
here is my code below
const App = () => { return (<NavigationContainer fallback={<Text>Loading...</Text>} theme={MyTheme}><Stack.Navigator initialRouteName={ROUTES.LOGIN}><Stack.Screen name={ROUTES.LOGIN} component={AuthStack} options={{ headerShown: false, gestureEnabled: false, }} /></Stack.Navigator></NavigationContainer> );};const AuthStack = () => { return (<Stack.Navigator initialRouteName={ROUTES.LOGIN}><Stack.Screen name={ROUTES.LOGIN} component={LoginPage} options={{ headerLeft: () => null, headerTitle: () => null, headerRight: () => null, headerShown: false }} /><Stack.Screen name={ROUTES.HOME} component={DrawerStack} options={{ headerLeft: () => null, }} /></Stack.Navigator> );};const DrawerStack = () => { return (<Drawer.Navigator drawerType="front" component={HomePage} screenOptions={{ activeTintColor: "#e91e63", itemStyle: { marginVertical: 10 }, }}> {DrawerItems.map((drawer) => (<Drawer.Screen key={drawer.name} name={drawer.name} component={drawer.routeName==`${ROUTES.FirstScreen}` ? FirstScreen : drawer.routeName==`${ROUTES.SecondScreen}` ? SecondScreen : HomePage} options={{ drawerIcon: ({ focused }) => drawer.iconType === "Material" ? (<MaterialCommunityIcons // name={drawer.iconName} size={24} color={focused ? "#e91e63" : "black"} /> ) : drawer.iconType === "Feather" ? (<Feather // name={drawer.iconName} size={24} color={focused ? "#e91e63" : "black"} /> ) : (<FontAwesome5 // name={drawer.iconName} size={24} color={focused ? "#e91e63" : "black"} /> ), }} /> ))}</Drawer.Navigator> );};
Array of DrawerItems can be found in the link belowhttps://www.waldo.com/blog/react-native-side-menu-guide