Richard Mendes
August 09, 2025 • 2 minutesDrawer + Tabs Navigation in Expo (Step-by-Step)
Install Required Packages
npx expo install @react-navigation/drawer react-native-gesture-handler react-native-reanimated
Set Up Drawer in app/_layout.tsx
import { Drawer } from 'expo-router/drawer';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
export default function Layout() {
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<Drawer>
<Drawer.Screen
name="(tabs)" // Must match folder name in app directory
options={{
drawerLabel: 'My Tabs',
title: 'Tabs Overview',
}}
/>
<Drawer.Screen
name="(settings)" // Must match folder name in app directory
options={{
drawerLabel: 'My Settings',
title: 'Manage your settings',
}}
/>
<Drawer.Screen
name="+not-found"
options={{ drawerItemStyle: { display: 'none' } }}
/>
</Drawer>
</GestureHandlerRootView>
);
}
Create the (settings) Folder
Just like we already have the (tabs) folder for our tab navigation, we’ll create a separate folder for the settings screen.
Inside your app directory, create a new folder named:
app/(settings)
Now create (settings)/_layout.tsx file and include this code in it:
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { Tabs } from 'expo-router';
export default function SettingsLayout() {
return (
<Tabs>
<Tabs.Screen
name="index"
options={{
title: 'General Settings',
tabBarIcon: ({ color }) => <FontAwesome size={28} name="home" color={color} />,
}}
/>
<Tabs.Screen
name="profilesettings"
options={{
title: 'Profile Settings',
tabBarIcon: ({ color }) => <FontAwesome size={28} name="cog" color={color} />,
}}
/>
</Tabs>
);
}
Inside (settings), create an index.tsx and profilesettings.tsx file for the main settings screen:
(settings)/index.tsx
import { StyleSheet, Text, View } from 'react-native';
export default function GeneralSettings() {
return (
<View style={styles.container}>
<Text>General Settings</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
(settings/profilesettings.tsx)
import { StyleSheet, Text, View } from 'react-native';
export default function ProfileSettings() {
return (
<View style={styles.container}>
<Text>Profile Settings</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});