I am working on an Expo project using expo-router and implementing a Drawer for navigation. The issue occurs when I set headerShown: true in the screenOptions. While the drawer opens, tapping on the items does not navigate to the corresponding screens.
Here is the relevant part of my code:
import { Drawer } from 'expo-router/drawer';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { ThemeProvider, DarkTheme, DefaultTheme } from '@react-navigation/native';
import { useSelector } from 'react-redux';
import { useColorScheme } from 'react-native';
function AppContent() {
let theme = useSelector((state) => state.theme.theme);
const colorScheme = useColorScheme();
return (
<ThemeProvider value={theme === 'dark' ? DarkTheme : DefaultTheme}>
<GestureHandlerRootView style={{ flex: 1 }}>
<Drawer
defaultStatus="open"
screenOptions={{
headerShown: true,
drawerActiveBackgroundColor: '#3498db',
drawerActiveTintColor: '#ffffff',
drawerInactiveTintColor: '#bdc3c7',
drawerStyle: {
backgroundColor: '#f4f4f4',
width: 200,
},
drawerType: 'slide',
swipeEnabled: true,
}}
>
<Drawer.Screen name="index" options={{ title: 'Home' }} />
<Drawer.Screen name="audits" options={{ title: 'Audits' }} />
<Drawer.Screen name="support" options={{ title: 'Support' }} />
</Drawer>
</GestureHandlerRootView>
</ThemeProvider>
);
}
export default function RootLayout() {
return <AppContent />;
}
1.Setting headerShown: false resolves the issue, but I need the header to be visible. 2.Checking if the issue occurs without custom styles or configurations — it persists.
Issue solved this way:
drawerType changed to 'back',
ToggleDrawer wasn't accessible. By setting drawerType to 'back', the drawer becomes part of the same interaction layer, allowing toggleDrawer to work seamlessly, slide and front drawerType caused this issue.