CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-drawer
CYW
CYW

Reputation: 135

react navigation drawer won't stay open

When I try to swipe it open, it swings right back.

I'm using stack with drawer together maybe this might be a problem, but so far I've tried everything, reviewed all the similar questions to this but nothing worked

my code:

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

const Stack = createStackNavigator();
const RootStack = () => {

  return (
    <CredentialsContext.Consumer>
      {({ storedCredentials }) => (
        <NavigationContainer>
          <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>
      )}
    </CredentialsContext.Consumer>
  );
};

Any help will be greatly appreciated, thanks in advance.

Upvotes: 0

Views: 625

Answers (2)

HDams
HDams

Reputation: 1

Just change version of react-navigation/drawer if you have version 5

Upvotes: 0

Francois Nadeau
Francois Nadeau

Reputation: 7463

I had the same issue. I found out that some of my react-navigation libs where not on the same major release (in the package.json). So I changed them all to be on the same major version number, 6.X in my case, re-installed the packages and my code started working.

-    "@react-navigation/bottom-tabs": "^6.0.1",
-    "@react-navigation/native": "^5.9.4",
-    "@react-navigation/stack": "^5.14.5",
+    "@react-navigation/drawer": "^6.1.4",
+    "@react-navigation/native": "^6.0.4",
+    "@react-navigation/stack": "^6.0.9",

Upvotes: 2

Related Questions