Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Display a Drawer Stack inside Stack Navigator now showing items after click

$
0
0

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>  );};

Stack Navigator with DrawerStack

Array of DrawerItems can be found in the link belowhttps://www.waldo.com/blog/react-native-side-menu-guide


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>