Im trying to open the drawer in my app using the built in function navigation.openDrawer() but its simply not working. The button press is able to log the navigation object and it shows openDrawer as an available function.
When I set the defaultStatus="open" property, the drawer is open on app start, and is able to navigate to the screens inside it. It is also able to open and close using the swipe gesture. But as soon as I press the button that triggers navigation.openDrawer() it gets stuck and even swipe gestures stop working.
I think since taps and swipes are working, also the drawer open/close animation is working using swipe gesture, there may not be an issue with react-native-gesture-handler or react-native-reanimated. Also since the navigation is working perfectly, from inside the drawer, there doesn't seem to be a problem with @react-navigation/drawer.
I'm unable to identify the issue, I have followed the documentation and tried many solutions on gitHub and stackOverflow. None of them worked. Need help.
Also, I have imported react-native-gesture-handler in index.js which is top of the component tree.
These are the npm versions
"@react-navigation/drawer": "^6.6.2",
"@react-navigation/native-stack": "^6.9.12",
"@react-navigation/native": "^6.1.6",
"react-native-gesture-handler": "^2.10.1",
"react-native-reanimated": "^3.2.0",
"react-native-screens": "^3.20.0",
a minimal example :
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
onPress={() => navigation.navigate('Notifications')}
title="Go to notifications"
/>
</View>
);
}
function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.goBack()} title="Go back home" />
</View>
);
}
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
