Edit this page
Learn how to define shared UI elements such as tab bars and headers.
Edit this page
By default, routes fill the entire screen. Moving between them is a full-page transition with no animation. In native apps, users expect shared elements like headers and tab bars to persist between pages. These are created using layout routes.
To create a layout route for a directory, create a file named _layout.tsx in the directory, and export a React component as default
.
import { Slot } from 'expo-router';
export default function HomeLayout() {
return <Slot />;
}
From the above example, Slot will render the current child route, think of this like the children
prop in React. This component can be wrapped with other components to create a layout.
import { Slot } from 'expo-router';
export default function HomeLayout() {
return (
<>
<Header />
<Slot />
<Footer />
</>
);
}
Expo Router supports adding a single layout route for a given directory. If you want to use multiple layout routes, add multiple directories:
app
_layout.tsx
home
_layout.tsx
index.tsx
import { Tabs } from 'expo-router';
export default function Layout() {
return <Tabs />;
}
import { Stack } from 'expo-router';
export default function Layout() {
return <Stack />;
}
If you want multiple layout routes without modifying the URL, you can use groups.
You can prevent a segment from showing in the URL by using the group syntax ()
.
/root/home
/home
This is useful for adding layouts without adding additional segments to the URL. You can add as many groups as you want.
Groups are also good for organizing sections of the app. In the following example, we have app/(app) which is where the main app lives, and app/(aux) which is where auxiliary pages live. This is useful for adding pages which you want to link to externally, but don't need to be part of the main app.
app
(app)
index.tsx
user.tsx
(aux)
terms-of-service.tsx
privacy-policy.tsx
One of the best advantages to React Native is being able to use native UI components. Expo Router provides a few drop-in native layouts that you can use to easily achieve familiar native behavior. To change between truly-native layouts on certain platforms and custom layouts on others, see Platform-specific modules.
import { Stack } from 'expo-router';
export default function HomeLayout() {
return (
<Stack screenOptions={{ ... }} />
);
}
Learn more about the built-in layouts:
Render a stack of screens like a deck of cards with a header on top. This is a native stack navigator that uses native animations and gestures.
Render screens with a tab bar below them.
Add a drawer which can be pulled over the current context.
Implement native modals which float over the current context.
Expo Router supports additional conventions and systems to build complex UIs that native app users expect. These are not required to use Expo Router but are available if you need them.
Add multiple layouts to a route.
Create routes which appear in multiple places simultaneously, while using the same URL.