React Native Drawer Navigation always closing automatically

Question

I have a React Native app using React Navigation. The app already consists of a Tab Navigator nesting Stack Navigators. Now I additionally wanted to add a Drawer Navigation at the very top level, displaying a custom drawer content.

So my hierarchy would be DrawerNavigator (nesting the 1 TabNavigator) > TabNavigator (nesting 5 StackNavigators) > Stack Navigator (nesting individual number of actual content screens).

To accomplish this, I have added the Drawer Navigator at the top level, nesting the existing Tab Navigator:

<Drawer.Navigator
    initialRouteName="MainTabNav"
    drawerContent={props => <DrawerMenu {...props} />}
    screenOptions={{
        headerShown: false,
    }}>
    <Drawer.Screen name="MainTabNav" component={MainTabNavigator} />
</Drawer.Navigator>

Here is my issue now: When I swipe from the left to the right, the Drawer shows up and I can see my custom drawer navigation component as long as I leave my finger on the screen. Whenever I remove the finger from the screen, the drawer navigation automatically closes again.

Furthermore, calling navigation.dispatch(DrawerActions.openDrawer()) from a Pressable inside the Stack Navigator does nothing - the drawer will just not open at all.

...
import {useNavigation} from '@react-navigation/native';
import {DrawerActions} from '@react-navigation/native';

const DrawerMenuButton = props => {
  const navigation = useNavigation();

  return (
    <Pressable
      onPress={() => {
        navigation.dispatch(DrawerActions.toggleDrawer());
      }}>
...

Does anyone have any idea for a solution to this problem?

Thanks a lot and best regards The Smart Home Maker

P.S.: My configuration is as follows

"react": "17.0.2",
"react-native": "0.64.2",
"@react-navigation/drawer": "^6.1.3",
"@react-navigation/native": "^5.1.7",
"@react-navigation/stack": "^5.2.14",
"@react-navigation/bottom-tabs": "^5.5.2",

OK I activated the redux devtools logger. After starting the app. an "INIT" action will be followed by an "UNKNOWN" action. When I then pull the drawer open, an "OPEN_DRAWER" action is being triggered and once I leave the finger off the screen, a second "OPEN_DRAWER" action is being triggered and the drawer navigation is closed automatically again. Both "OPEN_DRAWER" actions have the following content `{ type: 'OPEN_DRAWER', target: 'drawer-_VK6JQ8VYxsWzyNVMIV3A' }`. — the_smart_home_maker, Aug 17 '21 at 03:56

score 9 · Accepted Answer · answered Aug 18 '21 at 19:42

9

I saw the version for @react-navigation/native is v5. But drawer is v6. So please downgrade it to v5. It will work.

npm install @react-navigation/drawer@^5.x

answered Aug 18 '21 at 19:42

Anthony

499
4
10

2

That was it - after downgrading the drawer version, it works! Awesome thank you! I had not realized that I had installed different versions - very well observed! Thank you so much :-) – the_smart_home_maker Aug 19 '21 at 04:00
I've been struggling with this for DAYS! also I want to mention that I was struggling with the dispatch of all of the DrawerActions as well, but this solution solved all my issues – a curious guy Dec 21 '21 at 00:25
Awesome! It worked for me. So @react-navigation/drawer and @react-navigation/native must be on the same version? – Francisco Gallo M. Aug 21 '22 at 15:32
Yes. It should be on the same version. – Anthony Aug 23 '22 at 05:13

React Native Drawer Navigation always closing automatically

1 Answers1