Reference 03 • Cheat Sheet
Expo Router & Navigation Reference
Fast-lookup syntax for file routing conventions, Stack navigators, useRouter, and useLocalSearchParams.
📌 Quick Usage
Keep this reference tab open when creating new routes, linking screens, configuring headers, and passing parameters.
1. File-Based Routing Naming Conventions
| File Path |
URL Route |
Screen Purpose |
app/_layout.tsx |
N/A (Shell Layout) |
Defines root Stack/Tabs container, header themes, and wrapping providers. |
app/index.tsx |
/ |
Root / Home dashboard screen. |
app/add-meal.tsx |
/add-meal |
Static route screen (e.g. Add Meal modal or form). |
app/meal/[id].tsx |
/meal/:id |
Dynamic route segment capturing ID in useLocalSearchParams(). |
app/(tabs)/_layout.tsx |
/ (Group) |
Parentheses create route groups without affecting URL pathname. |
2. useRouter() Methods Quick Table
| Method |
Example Syntax |
Action |
router.push(url) |
router.push('/add-meal') |
Pushes a new screen onto the stack. |
router.push(object) |
router.push({ pathname: '/meal/[id]', params: { id: '1' } }) |
Pushes dynamic route with typed parameter payload. |
router.back() |
router.back() |
Pops active screen and returns to previous screen. |
router.replace(url) |
router.replace('/home') |
Replaces active screen in stack history (used for auth redirects). |
router.setParams(params) |
router.setParams({ query: 'high-protein' }) |
Updates current screen's query parameters without reloading. |
3. Stack Screen Options Quick Table
| Option Prop |
Type |
Example |
Effect |
title |
string |
"Meal Details" |
Sets text displayed in top navigation bar. |
headerShown |
boolean |
false |
Hides native header (ideal when building custom in-screen headers). |
presentation |
string |
"modal" | "card" |
Sets transition animation (e.g. bottom sheet modal vs standard push). |
headerStyle |
StyleProp |
{ backgroundColor: "#020617" } |
Customizes header bar background color. |
headerTintColor |
string |
"#818cf8" |
Sets header text and back button arrow accent color. |
4. useLocalSearchParams Quick Pattern
import { useLocalSearchParams } from "expo-router";
export default function DetailScreen() {
// 👈 Type the expected params interface for full TypeScript autocomplete
const { id, name, calories } = useLocalSearchParams<{
id: string;
name?: string;
calories?: string;
}>();
return (
<View>
<Text>Viewing {name} (ID: {id}) - {calories} kcal</Text>
</View>
);
}