Expo Router and React Navigation

File-based and component-based navigation

React Navigation is the established navigation library: you declare navigators in components, such as a native stack (push and pop screens with platform transitions) and bottom tabs, and nest them. Expo Router is built on top of React Navigation and adds file-based routing: every file in the app directory becomes a route, _layout.tsx files define the navigator for a folder (Stack, Tabs), folders in parentheses such as (tabs) group routes without changing the URL, and [id].tsx is a dynamic segment. Because routes map to URLs, deep linking works automatically. Both are actively maintained; check the docs for your version.

Moving between screens

Stacks, tabs and links connect screens, with parameters, deep links and guarded routes for signed-in users.

An Expo Router app with tabs

The file tree and a tab layout.

// app/
//   _layout.tsx          root Stack
//   (tabs)/_layout.tsx   tab navigator
//   (tabs)/index.tsx     "/"  (Home tab)
//   (tabs)/settings.tsx  "/settings"
//   product/[id].tsx     "/product/42"

// app/(tabs)/_layout.tsx
import { Tabs } from "expo-router";

export default function TabLayout() {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: "#2563eb" }}>
      <Tabs.Screen name="index" options={{ title: "Home" }} />
      <Tabs.Screen name="settings" options={{ title: "Settings" }} />
    </Tabs>
  );
}

// app/_layout.tsx
import { Stack } from "expo-router";
export default function RootLayout() {
  return <Stack />;
}

A deck of cards and a set of drawers

A stack is a deck: new screens go on top and back removes the top card. Tabs are drawers: you switch between them and each keeps its own contents.

Quick check: In Expo Router, what does a file named app/product/[id].tsx create?

• A dynamic route such as /product/42 with an id parameter
• A product database table
• A tab bar icon
• A native module called id