Walkthrough

Navigation with Expo Router

File-based routing for mobile: tabs, stacks, modals.

Expo Router brings Next.js-style file-based routing to mobile. Tabs are folders. Stacks are files. Modals are a route option. Once you've internalized the file conventions, navigation barely needs prompting at all.

Steps · 0 / 3 done

Add a tabs group

Create the (tabs) group and a layout that defines the tab bar.

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
export default function Layout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: 'Home' }} />
      <Tabs.Screen name="history" options={{ title: 'History' }} />
    </Tabs>
  );
}

VerifyTwo tabs render at the bottom of the simulator.

Add a modal route

Modals are stack screens with presentation: 'modal'. Codex handles this if you ask.

// app/_layout.tsx — at the root stack
<Stack>
  <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
  <Stack.Screen name="new-tip" options={{ presentation: 'modal' }} />
</Stack>

VerifyNavigating to /new-tip slides up from the bottom.

Link between routes

Use the Link component or router.push from useRouter().

import { Link } from 'expo-router';
<Link href="/new-tip" asChild>
  <Pressable><Text>+ New tip</Text></Pressable>
</Link>

VerifyTapping the button opens the modal.

Check your understanding

Q1. How do you make a route present as a modal in Expo Router?

· Tick off the 3 step(s) above.

· Score 100% on the quiz.