1# Form Sheets in Expo Router
2 
3This skill covers implementing form sheets with footers using Expo Router's Stack navigator and react-native-screens.
4 
5## Overview
6 
7Form sheets are modal presentations that appear as a card sliding up from the bottom of the screen. They're ideal for:
8 
9- Quick actions and confirmations
10- Settings panels
11- Login/signup flows
12- Action sheets with custom content
13 
14**Requirements:**
15 
16- Expo Router Stack navigator
17 
18## Basic Usage
19 
20### Form Sheet with Footer
21 
22Configure the Stack.Screen with transparent backgrounds and sheet presentation:
23 
24```tsx
25// app/_layout.tsx
26import { Stack } from "expo-router";
27 
28export default function Layout() {
29  return (
30    <Stack>
31      <Stack.Screen name="index" />
32      <Stack.Screen
33        name="about"
34        options={{
35          presentation: "formSheet",
36          sheetAllowedDetents: [0.25],
37          headerTransparent: true,
38          contentStyle: { backgroundColor: "transparent" },
39          sheetGrabberVisible: true,
40        }}
41      >
42        <Stack.Header style={{ backgroundColor: "transparent" }}></Stack.Header>
43      </Stack.Screen>
44    </Stack>
45  );
46}
47```
48 
49### Form Sheet Screen Content
50 
51> Requires Expo SDK 55 or later.
52 
53Use `flex: 1` to allow the content to fill available space, enabling footer positioning:
54 
55```tsx
56// app/about.tsx
57import { View, Text, StyleSheet } from "react-native";
58 
59export default function AboutSheet() {
60  return (
61    <View style={styles.container}>
62      {/* Main content */}
63      <View style={styles.content}>
64        <Text>Sheet Content</Text>
65      </View>
66 
67      {/* Footer - stays at bottom */}
68      <View style={styles.footer}>
69        <Text>Footer Content</Text>
70      </View>
71    </View>
72  );
73}
74 
75const styles = StyleSheet.create({
76  container: {
77    flex: 1,
78  },
79  content: {
80    flex: 1,
81    padding: 16,
82  },
83  footer: {
84    padding: 16,
85  },
86});
87```
88 
89### Formsheet with interactive content below
90 
91Use `sheetLargestUndimmedDetentIndex` (zero-indexed) to keep content behind the form sheet interactive — e.g. letting users pan a map beneath it. Setting it to `1` allows interaction at the first two detents but dims on the third.
92 
93```tsx
94// app/_layout.tsx
95import { Stack } from 'expo-router';
96 
97export default function Layout() {
98  return (
99    <Stack screenOptions={{ headerShown: false }}>
100      <Stack.Screen name="index" />
101      <Stack.Screen
102        name="info-sheet"
103        options={{
104          presentation: "formSheet",
105          sheetAllowedDetents: [0.2, 0.5, 1.0],
106          sheetLargestUndimmedDetentIndex: 1,
107          /* other options */
108        }}
109      />
110    </Stack>
111  )
112}
113```
114 
115## Key Options
116 
117| Option                | Type       | Description                                                 |
118| --------------------- | ---------- | ----------------------------------------------------------- |
119| `presentation`        | `string`   | Set to `'formSheet'` for sheet presentation                 |
120| `sheetGrabberVisible` | `boolean`  | Shows the drag handle at the top of the sheet               |
121| `sheetAllowedDetents` | `number[]` | Array of detent heights (0-1 range, e.g., `[0.25]` for 25%) |
122| `headerTransparent`   | `boolean`  | Makes header background transparent                         |
123| `contentStyle`        | `object`   | Style object for the screen content container               |
124| `title`               | `string`   | Screen title (set to `''` for no title)                     |
125 
126## Common Detent Values
127 
128- `[0.25]` - Quarter sheet (compact actions)
129- `[0.5]` - Half sheet (medium content)
130- `[0.75]` - Three-quarter sheet (detailed forms)
131- `[0.25, 0.5, 1]` - Multiple stops (expandable sheet)
132 
133## Complete Example
134 
135```tsx
136// _layout.tsx
137import { Stack } from "expo-router";
138 
139export default function Layout() {
140  return (
141    <Stack>
142      <Stack.Screen name="index" options={{ title: "Home" }} />
143      <Stack.Screen
144        name="confirm"
145        options={{
146          contentStyle: { backgroundColor: "transparent" },
147          presentation: "formSheet",
148          title: "",
149          sheetGrabberVisible: true,
150          sheetAllowedDetents: [0.25],
151          headerTransparent: true,
152        }}
153      >
154        <Stack.Header style={{ backgroundColor: "transparent" }}>
155          <Stack.Header.Right />
156        </Stack.Header>
157      </Stack.Screen>
158    </Stack>
159  );
160}
161```
162 
163```tsx
164// app/confirm.tsx
165import { View, Text, Pressable, StyleSheet } from "react-native";
166import { router } from "expo-router";
167 
168export default function ConfirmSheet() {
169  return (
170    <View style={styles.container}>
171      <View style={styles.content}>
172        <Text style={styles.title}>Confirm Action</Text>
173        <Text style={styles.description}>
174          Are you sure you want to proceed?
175        </Text>
176      </View>
177 
178      <View style={styles.footer}>
179        <Pressable style={styles.cancelButton} onPress={() => router.back()}>
180          <Text style={styles.cancelText}>Cancel</Text>
181        </Pressable>
182        <Pressable style={styles.confirmButton} onPress={() => router.back()}>
183          <Text style={styles.confirmText}>Confirm</Text>
184        </Pressable>
185      </View>
186    </View>
187  );
188}
189 
190const styles = StyleSheet.create({
191  container: {
192    flex: 1,
193  },
194  content: {
195    flex: 1,
196    padding: 20,
197    alignItems: "center",
198    justifyContent: "center",
199  },
200  title: {
201    fontSize: 18,
202    fontWeight: "600",
203    marginBottom: 8,
204  },
205  description: {
206    fontSize: 14,
207    color: "#666",
208    textAlign: "center",
209  },
210  footer: {
211    flexDirection: "row",
212    padding: 16,
213    gap: 12,
214  },
215  cancelButton: {
216    flex: 1,
217    padding: 14,
218    borderRadius: 10,
219    backgroundColor: "#f0f0f0",
220    alignItems: "center",
221  },
222  cancelText: {
223    fontSize: 16,
224    fontWeight: "500",
225  },
226  confirmButton: {
227    flex: 1,
228    padding: 14,
229    borderRadius: 10,
230    backgroundColor: "#007AFF",
231    alignItems: "center",
232  },
233  confirmText: {
234    fontSize: 16,
235    fontWeight: "500",
236    color: "white",
237  },
238});
239```
240 
241## Troubleshooting
242 
243### Content not filling sheet
244 
245Make sure the root View uses `flex: 1`:
246 
247```tsx
248<View style={{ flex: 1 }}>{/* content */}</View>
249```
250 
251### Sheet background showing through
252 
253Set `contentStyle: { backgroundColor: 'transparent' }` in options and style your content container with the desired background color instead.
254