1---
2name: building-native-ui
3description: Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.
4version: 1.0.1
5license: MIT
6---
7 
8# Expo UI Guidelines
9 
10## References
11 
12Consult these resources as needed:
13 
14```
15references/
16  animations.md          Reanimated: entering, exiting, layout, scroll-driven, gestures
17  controls.md            Native iOS: Switch, Slider, SegmentedControl, DateTimePicker, Picker
18  form-sheet.md          Form sheets in expo-router: configuration, footers and background interaction. 
19  gradients.md           CSS gradients via experimental_backgroundImage (New Arch only)
20  icons.md               SF Symbols via expo-image (sf: source), names, animations, weights
21  media.md               Camera, audio, video, and file saving
22  route-structure.md     Route conventions, dynamic routes, groups, folder organization
23  search.md              Search bar with headers, useSearch hook, filtering patterns
24  storage.md             SQLite, AsyncStorage, SecureStore
25  tabs.md                NativeTabs, migration from JS tabs, iOS 26 features
26  toolbar-and-headers.md Stack headers and toolbar buttons, menus, search (iOS only)
27  visual-effects.md      Blur (expo-blur) and liquid glass (expo-glass-effect)
28  webgpu-three.md        3D graphics, games, GPU visualizations with WebGPU and Three.js
29  zoom-transitions.md    Apple Zoom: fluid zoom transitions with Link.AppleZoom (iOS 18+)
30```
31 
32## Running the App
33 
34**CRITICAL: Always try Expo Go first before creating custom builds.**
35 
36Most Expo apps work in Expo Go without any custom native code. Before running `npx expo run:ios` or `npx expo run:android`:
37 
381. **Start with Expo Go**: Run `npx expo start` and scan the QR code with Expo Go
392. **Check if features work**: Test your app thoroughly in Expo Go
403. **Only create custom builds when required** - see below
41 
42### When Custom Builds Are Required
43 
44You need `npx expo run:ios/android` or `eas build` ONLY when using:
45 
46- **Local Expo modules** (custom native code in `modules/`)
47- **Apple targets** (widgets, app clips, extensions via `@bacons/apple-targets`)
48- **Third-party native modules** not included in Expo Go
49- **Custom native configuration** that can't be expressed in `app.json`
50 
51### When Expo Go Works
52 
53Expo Go supports a huge range of features out of the box:
54 
55- All `expo-*` packages (camera, location, notifications, etc.)
56- Expo Router navigation
57- Most UI libraries (reanimated, gesture handler, etc.)
58- Push notifications, deep links, and more
59 
60**If you're unsure, try Expo Go first.** Creating custom builds adds complexity, slower iteration, and requires Xcode/Android Studio setup.
61 
62## Code Style
63 
64- Be cautious of unterminated strings. Ensure nested backticks are escaped; never forget to escape quotes correctly.
65- Always use import statements at the top of the file.
66- Always use kebab-case for file names, e.g. `comment-card.tsx`
67- Always remove old route files when moving or restructuring navigation
68- Never use special characters in file names
69- Configure tsconfig.json with path aliases, and prefer aliases over relative imports for refactors.
70 
71## Routes
72 
73See `./references/route-structure.md` for detailed route conventions.
74 
75- Routes belong in the `app` directory.
76- Never co-locate components, types, or utilities in the app directory. This is an anti-pattern.
77- Ensure the app always has a route that matches "/", it may be inside a group route.
78 
79## Library Preferences
80 
81- Never use modules removed from React Native such as Picker, WebView, SafeAreaView, or AsyncStorage
82- Never use legacy expo-permissions
83- `expo-audio` not `expo-av`
84- `expo-video` not `expo-av`
85- `expo-image` with `source="sf:name"` for SF Symbols, not `expo-symbols` or `@expo/vector-icons`
86- `react-native-safe-area-context` not react-native SafeAreaView
87- `process.env.EXPO_OS` not `Platform.OS`
88- `React.use` not `React.useContext`
89- `expo-image` Image component instead of intrinsic element `img`
90- `expo-glass-effect` for liquid glass backdrops
91 
92## Responsiveness
93 
94- Always wrap root component in a scroll view for responsiveness
95- Use `<ScrollView contentInsetAdjustmentBehavior="automatic" />` instead of `<SafeAreaView>` for smarter safe area insets
96- `contentInsetAdjustmentBehavior="automatic"` should be applied to FlatList and SectionList as well
97- Use flexbox instead of Dimensions API
98- ALWAYS prefer `useWindowDimensions` over `Dimensions.get()` to measure screen size
99 
100## Behavior
101 
102- Use expo-haptics conditionally on iOS to make more delightful experiences
103- Use views with built-in haptics like `<Switch />` from React Native and `@react-native-community/datetimepicker`
104- When a route belongs to a Stack, its first child should almost always be a ScrollView with `contentInsetAdjustmentBehavior="automatic"` set
105- When adding a `ScrollView` to the page it should almost always be the first component inside the route component
106- Prefer `headerSearchBarOptions` in Stack.Screen options to add a search bar
107- Use the `<Text selectable />` prop on text containing data that could be copied
108- Consider formatting large numbers like 1.4M or 38k
109- Never use intrinsic elements like 'img' or 'div' unless in a webview or Expo DOM component
110 
111# Styling
112 
113Follow Apple Human Interface Guidelines.
114 
115## General Styling Rules
116 
117- Prefer flex gap over margin and padding styles
118- Prefer padding over margin where possible
119- Always account for safe area, either with stack headers, tabs, or ScrollView/FlatList `contentInsetAdjustmentBehavior="automatic"`
120- Ensure both top and bottom safe area insets are accounted for
121- Inline styles not StyleSheet.create unless reusing styles is faster
122- Add entering and exiting animations for state changes
123- Use `{ borderCurve: 'continuous' }` for rounded corners unless creating a capsule shape
124- ALWAYS use a navigation stack title instead of a custom text element on the page
125- When padding a ScrollView, use `contentContainerStyle` padding and gap instead of padding on the ScrollView itself (reduces clipping)
126- CSS and Tailwind are not supported - use inline styles
127 
128## Text Styling
129 
130- Add the `selectable` prop to every `<Text/>` element displaying important data or error messages
131- Counters should use `{ fontVariant: 'tabular-nums' }` for alignment
132 
133## Shadows
134 
135Use CSS `boxShadow` style prop. NEVER use legacy React Native shadow or elevation styles.
136 
137```tsx
138<View style={{ boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)" }} />
139```
140 
141'inset' shadows are supported.
142 
143# Navigation
144 
145## Link
146 
147Use `<Link href="/path" />` from 'expo-router' for navigation between routes.
148 
149```tsx
150import { Link } from 'expo-router';
151 
152// Basic link
153<Link href="/path" />
154 
155// Wrapping custom components
156<Link href="/path" asChild>
157  <Pressable>...</Pressable>
158</Link>
159```
160 
161Whenever possible, include a `<Link.Preview>` to follow iOS conventions. Add context menus and previews frequently to enhance navigation.
162 
163## Stack
164 
165- ALWAYS use `_layout.tsx` files to define stacks
166- Use Stack from 'expo-router/stack' for native navigation stacks
167 
168### Page Title
169 
170Set the page title in Stack.Screen options:
171 
172```tsx
173<Stack.Screen options={{ title: "Home" }} />
174```
175 
176## Context Menus
177 
178Add long press context menus to Link components:
179 
180```tsx
181import { Link } from "expo-router";
182 
183<Link href="/settings" asChild>
184  <Link.Trigger>
185    <Pressable>
186      <Card />
187    </Pressable>
188  </Link.Trigger>
189  <Link.Menu>
190    <Link.MenuAction
191      title="Share"
192      icon="square.and.arrow.up"
193      onPress={handleSharePress}
194    />
195    <Link.MenuAction
196      title="Block"
197      icon="nosign"
198      destructive
199      onPress={handleBlockPress}
200    />
201    <Link.Menu title="More" icon="ellipsis">
202      <Link.MenuAction title="Copy" icon="doc.on.doc" onPress={() => {}} />
203      <Link.MenuAction
204        title="Delete"
205        icon="trash"
206        destructive
207        onPress={() => {}}
208      />
209    </Link.Menu>
210  </Link.Menu>
211</Link>;
212```
213 
214## Link Previews
215 
216Use link previews frequently to enhance navigation:
217 
218```tsx
219<Link href="/settings">
220  <Link.Trigger>
221    <Pressable>
222      <Card />
223    </Pressable>
224  </Link.Trigger>
225  <Link.Preview />
226</Link>
227```
228 
229Link preview can be used with context menus.
230 
231## Modal
232 
233Present a screen as a modal:
234 
235```tsx
236<Stack.Screen name="modal" options={{ presentation: "modal" }} />
237```
238 
239Prefer this to building a custom modal component.
240 
241## Sheet
242 
243Present a screen as a dynamic form sheet:
244 
245```tsx
246<Stack.Screen
247  name="sheet"
248  options={{
249    presentation: "formSheet",
250    sheetGrabberVisible: true,
251    sheetAllowedDetents: [0.5, 1.0],
252    contentStyle: { backgroundColor: "transparent" },
253  }}
254/>
255```
256 
257- Using `contentStyle: { backgroundColor: "transparent" }` makes the background liquid glass on iOS 26+.
258 
259## Common route structure
260 
261A standard app layout with tabs and stacks inside each tab:
262 
263```
264app/
265  _layout.tsx — <NativeTabs />
266  (index,search)/
267    _layout.tsx — <Stack />
268    index.tsx — Main list
269    search.tsx — Search view
270```
271 
272```tsx
273// app/_layout.tsx
274import { NativeTabs, Icon, Label } from "expo-router/unstable-native-tabs";
275import { Theme } from "../components/theme";
276 
277export default function Layout() {
278  return (
279    <Theme>
280      <NativeTabs>
281        <NativeTabs.Trigger name="(index)">
282          <Icon sf="list.dash" />
283          <Label>Items</Label>
284        </NativeTabs.Trigger>
285        <NativeTabs.Trigger name="(search)" role="search" />
286      </NativeTabs>
287    </Theme>
288  );
289}
290```
291 
292Create a shared group route so both tabs can push common screens:
293 
294```tsx
295// app/(index,search)/_layout.tsx
296import { Stack } from "expo-router/stack";
297import { PlatformColor } from "react-native";
298 
299export default function Layout({ segment }) {
300  const screen = segment.match(/\((.*)\)/)?.[1]!;
301  const titles: Record<string, string> = { index: "Items", search: "Search" };
302 
303  return (
304    <Stack
305      screenOptions={{
306        headerTransparent: true,
307        headerShadowVisible: false,
308        headerLargeTitleShadowVisible: false,
309        headerLargeStyle: { backgroundColor: "transparent" },
310        headerTitleStyle: { color: PlatformColor("label") },
311        headerLargeTitle: true,
312        headerBlurEffect: "none",
313        headerBackButtonDisplayMode: "minimal",
314      }}
315    >
316      <Stack.Screen name={screen} options={{ title: titles[screen] }} />
317      <Stack.Screen name="i/[id]" options={{ headerLargeTitle: false }} />
318    </Stack>
319  );
320}
321```
322