is there any way to keep drawer opened after back from stack navigation in react native expo

Question

I create Drawer Navigation and inside it there is stack navigation all I need when back from stack need the drawer to be opened

my code is like this and All I need is to keep the drawer opened after back from any stack screen

const Drawer = createDrawerNavigator();
function DrawerNav({ navigation }) {
  // toggleDrawer = () => {
  //   this.props.navigation.dispatch(DrawerActions.toggleDrawer())
  // }
  
  return (
    <Drawer.Navigator initialRouteName="Home" 
      screenOptions={{
        headerShown: true,
        headerStyle: {
          backgroundColor: brand,
        },
        headerTintColor: primary,
        headerTransparent: false,
        headerTitle: '',
        headerLeftContainerStyle: {
          paddingLeft: 20,
        },
    }}>
      <Drawer.Screen name="Home" component={HomeScreen} options={horizontalAnimation}/>
      <Drawer.Screen name="RootStack" component={RootStack} />
    </Drawer.Navigator>
  );
}

const Stack = createStackNavigator();
const RootStack = () => {
  return (
          <Stack.Navigator
            screenOptions={{
              headerStyle: {
                backgroundColor: brand,
              },
              headerTintColor: primary,
              headerTransparent: true,
              headerTitle: '',
              headerLeftContainerStyle: {
                paddingLeft: 20,
              },
            }}
            
          >
            {storedCredentials ? (
              <Stack.Screen name="Home" component={DrawerNav} options={horizontalAnimation}/>
              
            ) : (
              <>
                <Stack.Screen name="Login" component={Login} options={horizontalAnimation}/>
                <Stack.Screen name="Signup" component={Signup} options={horizontalAnimation}/>
              </>
            )}
          </Stack.Navigator>
        </NavigationContainer>
  );
};

these is the installed package

"@react-navigation/drawer": "^6.1.8",
"@react-navigation/native": "^6.0.6",
"@react-navigation/stack": "^6.0.11",

did you found any solution? – Kishan Barmawala May 18 '22 at 11:23 — Kishan Barmawala, May 18 '22 at 11:23
No I didn't find any solution @KishanBarmawala – fatma mahmoud May 19 '22 at 08:07 — fatma mahmoud, May 19 '22 at 08:07

score 1 · Answer 1 · answered Aug 08 '22 at 11:42

Use this way...

function MyDrawer() {
  const dimensions = useWindowDimensions();

  return (
    <Drawer.Navigator
      screenOptions={{
        drawerType: 'permanent',
      }}
    >
      {/* Screens */}
    </Drawer.Navigator>
  );
}

Refer this

score 0 · Answer 2 · answered Jun 06 '22 at 20:10

<Drawer.Navigator
      drawerContent={(props) => <CustomDrawerContent {...props} />}
      >
      <Drawer.Screen
        name="RootStack"
        component={RootStack}
      />
     
 </Drawer.Navigator>

customDrawerContent : component that contains items to be listed on the side bar: check this link for that part https://stackoverflow.com/a/64173773/7689878.

To achieve the drawer remaining after navigating back keep only the RootStack(should contain all stack screens) in the Drawer Navigator.

is there any way to keep drawer opened after back from stack navigation in react native expo

2 Answers2