xref: /expo/docs/pages/routing/layouts.mdx (revision 683e8eb4) 
1---
2title: Layout routes
3description: Learn how to define shared UI elements such as tab bars and headers.
4---
5
6import { FileTree } from '~/ui/components/FileTree';
7import { GithubIcon, BookOpen02Icon, Rocket02Icon } from '@expo/styleguide-icons';
8import { BoxLink } from '~/ui/components/BoxLink';
9import { CODE } from '~/ui/components/Text';
10
11By 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**.
12
13## Create a layout route
14
15To create a layout route for a directory, create a file named **\_layout.js** in the directory, and export a React component as `default`.
16
17```js app/home/_layout.js
18import { Slot } from 'expo-router';
19
20export default function HomeLayout() {
21  return <Slot />;
22}
23```
24
25From 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.
26
27```js app/home/_layout.js
28import { Slot } from 'expo-router';
29
30export default function HomeLayout() {
31  return (
32    <>
33      <Header />
34      <Slot />
35      <Footer />
36    </>
37  );
38}
39```
40
41Expo Router supports adding a single layout route for a given directory. If you want to use multiple layout routes, add multiple directories:
42
43<FileTree files={['app/_layout.js', 'app/home/_layout.js', 'app/home/index.js']} />
44
45```js app/_layout.js
46import { Tabs } from 'expo-router';
47
48export default function Layout() {
49  return <Tabs />;
50}
51```
52
53```js app/home/_layout.js
54import { Stack } from 'expo-router';
55
56export default function Layout() {
57  return <Stack />;
58}
59```
60
61If you want multiple layout routes without modifying the URL, you can use [groups](#groups).
62
63## Groups
64
65You can prevent a segment from showing in the URL by using the group syntax `()`.
66
67- **app/root/home.js** matches `/root/home`
68- **app/(root)/home.js** matches `/home`
69
70This is useful for adding layouts without adding additional segments to the URL. You can add as many groups as you want.
71
72Groups 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.
73
74<FileTree
75  files={[
76    'app/(app)/index.js',
77    'app/(app)/user.js',
78    'app/(aux)/terms-of-service.js',
79    'app/(aux)/privacy-policy.js',
80  ]}
81/>
82
83## Native layouts
84
85One 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](/router/advanced/platform-specific-modules).
86
87```js app/home/_layout.js
88import { Stack } from 'expo-router';
89
90export default function HomeLayout() {
91    return (
92        <Stack screenOptions={{ ... }} />
93    )
94}
95```
96
97Learn more about the built-in layouts:
98
99<BoxLink
100  title="Stack navigation"
101  Icon={BookOpen02Icon}
102  description={
103    '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.'
104  }
105  href="/router/advanced/stack"
106/>
107
108<BoxLink
109  title="Tab navigation"
110  Icon={BookOpen02Icon}
111  description="Render screens with a tab bar below them."
112  href="/router/advanced/tabs"
113/>
114
115<BoxLink
116  title="Drawers"
117  Icon={BookOpen02Icon}
118  description="Add a drawer which can be pulled over the current context."
119  href="/router/advanced/drawer"
120/>
121
122<BoxLink
123  title="Modals"
124  Icon={BookOpen02Icon}
125  description="Implement native modals which float over the current context."
126  href="/router/advanced/modals"
127/>
128
129## Advanced
130
131Expo 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.
132
133<BoxLink
134  title="Nesting navigators"
135  Icon={BookOpen02Icon}
136  description="Add multiple layouts to a route."
137  href="/router/advanced/nesting-navigators"
138/>
139
140<BoxLink
141  title="Shared Routes"
142  Icon={BookOpen02Icon}
143  description="Create routes which appear in multiple places simultaneously, while using the same URL."
144  href="/router/advanced/shared-routes"
145/>
146
147## Next steps
148
149<BoxLink
150  title="Appearance elements"
151  Icon={BookOpen02Icon}
152  description="Learn how to use a splash screen, fonts and images in your app that is using Expo Router."
153  href="/routing/appearance/"
154/>
155