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",