# Expo Router and React Navigation — React Native

Source: https://www.skillbyai.com/en/react-native/n-router

> Stacks and tabs.

## 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.

![Three ideas: Expo Router and React Navigation, params and deep links, authentication flows.](assets/figures/react-native/section-4-map.svg) — Figure 4.1 — Routes, links and protected screens.

## An Expo Router app with tabs

The file tree and a tab layout.

```tsx
// 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.

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

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

*Answer:* A dynamic route such as /product/42 with an id parameter. Square brackets mark dynamic segments.