Richard Mendes
August 18, 2025 • 1 minExpo Router: Drawer Navigation with Custom Header Icons (app/_layout.tsx Example)
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { useRouter } from 'expo-router';
import { Drawer } from 'expo-router/drawer';
import { Pressable, View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
export default function Layout() {
const router = useRouter();
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<Drawer
screenOptions={{
headerRight: () => (
<View style={{ flexDirection: 'row', marginRight: 15 }}>
<Pressable
onPress={() => router.push('/notofications')}
style={{ marginRight: 15 }}
>
<FontAwesome name="bell" size={20} color="black" />
</Pressable>
<Pressable
onPress={() => router.push('/details')}
style={{ marginRight: 15 }}
>
<FontAwesome name="plus" size={20} color="black" />
</Pressable>
</View>
),
}}
>
<Drawer.Screen
name="(tabs)" // This is the name of the page and must match the url from root
options={{
drawerLabel: 'My Tabs',
title: 'Tabs Overview',
}}
/>
<Drawer.Screen
name="(settings)" // This is the name of the page and must match the url from root
options={{
drawerLabel: 'My Settings',
title: 'Manage your settings',
}}
/>
<Drawer.Screen
name="notofications"
options={ {title: 'Your Feeds'}}
/>
<Drawer.Screen
name="details"
options={{ drawerItemStyle: { display: 'none' } }}
/>
<Drawer.Screen
name="+not-found"
options={{ drawerItemStyle: { display: 'none' } }}
/>
</Drawer>
</GestureHandlerRootView>
);
}