Loading...
Loading...
Patterns for Expo Router including Stack configuration, native tabs, and file-based routing best practices. Apply when working with navigation, routing, or screen configuration.
npx skill4agent add jchaselubitz/drill-app expo-routerscreenOptions// app/_layout.tsx
import { Stack } from 'expo-router';
export default function RootLayout() {
return (
<Stack screenOptions={{ headerShown: false }} />
);
}<Stack.Screen>// app/lesson/[id].tsx
import { Stack } from 'expo-router';
export default function LessonScreen() {
return (
<View>
<Stack.Screen
options={{
title: 'Lesson',
headerShown: true,
headerBackTitle: 'Back',
}}
/>
{/* Screen content */}
</View>
);
}useNavigationsetOptionsimport { useNavigation } from 'expo-router';
import { useLayoutEffect } from 'react';
export default function Screen() {
const navigation = useNavigation();
useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (
<Pressable onPress={handlePress}>
<Ionicons name="add" size={28} />
</Pressable>
),
});
}, [navigation]);
return <View>{/* content */}</View>;
}expo-router/unstable-native-tabs// app/(tabs)/_layout.tsx
import { Icon, Label, NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
return (
<NativeTabs>
<NativeTabs.Trigger name="index" options={{ title: 'Home' }}>
<Icon sf="house.fill" drawable="custom_android_drawable" />
<Label>Home</Label>
</NativeTabs.Trigger>
</NativeTabs>
);
}app/<Stack.Screen>_layout.tsx(tabs)screenOptions<Stack.Screen>