app directory

The app is a special directory. Any file you add to this directory becomes a route inside the native app and reflects the same URL for that route on the web.

Create a route

In the app directory, a route is created by adding a file or a nested directory that includes index.tsx file.

_layout file

Layout files in a directory are used to define shared UI elements such as headers, tab bars so that they persist between different routes.

Root layout

The first layout file (_layout.tsx) inside the app directory is considered to be the single root component.

Between multiple routes, a Root layout file in Expo Router is used to share UI between multiple routes such as injecting global providers, themes, styles, delay splash screen rendering until assets and fonts are loaded, or defining your app's root navigation structure.

Stack navigator

A stack navigator is a pattern to navigate between different routes in an app. It allows transitioning between screens and managing the navigation history. It is conceptually similar to how a web browser handles the navigation state.

import { Stack } from "expo-router";

<Stack
  screenOptions={{
    headerStyle: {
      backgroundColor: "#f4511e",
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      fontWeight: "bold",
    },
  }}
>
  <Stack.Screen name="index" />
  <Stack.Screen name="details" />
</Stack>;

Navigating between routes

Expo Router uses a built-in component called Link to move between routes in an app. This is conceptually similar to how web works with the <a> tag and the href attribute.

You can use it by importing it from Expo Router library and then passing the href prop with the route to navigate as the value of the prop.

import { Link } from 'expo-router';

<Link href="/details">View details</Link>

Link wraps the children in a <Text> by default. You can customize to use a different button component. Use the Link component to wrap the custom button component and the asChild prop which forwards all props to the first child of the Link component. For more information on the Link component's props, see Navigate between pages.

Groups

A group is created to organize similar routes or a section of the app. Each group has a layout file, and the grouped directory requires a name inside parentheses (group).

The Root layout file also changes and now includes the (home) group which further uses (home)/index as the initial route of the app.