@niibase/bottom-sheet-manager 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/README.md +204 -193
  2. package/lib/commonjs/index.js +9 -2
  3. package/lib/commonjs/index.js.map +1 -1
  4. package/lib/commonjs/manager.js +56 -16
  5. package/lib/commonjs/manager.js.map +1 -1
  6. package/lib/commonjs/provider.js +41 -44
  7. package/lib/commonjs/provider.js.map +1 -1
  8. package/lib/commonjs/router/index.js +37 -7
  9. package/lib/commonjs/router/index.js.map +1 -1
  10. package/lib/commonjs/router/router.js.map +1 -1
  11. package/lib/commonjs/router/view.js +77 -220
  12. package/lib/commonjs/router/view.js.map +1 -1
  13. package/lib/commonjs/sheet.js +61 -85
  14. package/lib/commonjs/sheet.js.map +1 -1
  15. package/lib/module/index.js +2 -2
  16. package/lib/module/index.js.map +1 -1
  17. package/lib/module/manager.js +56 -16
  18. package/lib/module/manager.js.map +1 -1
  19. package/lib/module/provider.js +39 -42
  20. package/lib/module/provider.js.map +1 -1
  21. package/lib/module/router/index.js +39 -8
  22. package/lib/module/router/index.js.map +1 -1
  23. package/lib/module/router/router.js.map +1 -1
  24. package/lib/module/router/view.js +76 -220
  25. package/lib/module/router/view.js.map +1 -1
  26. package/lib/module/sheet.js +63 -87
  27. package/lib/module/sheet.js.map +1 -1
  28. package/lib/typescript/index.d.ts +2 -2
  29. package/lib/typescript/index.d.ts.map +1 -1
  30. package/lib/typescript/manager.d.ts +16 -0
  31. package/lib/typescript/manager.d.ts.map +1 -1
  32. package/lib/typescript/provider.d.ts +10 -23
  33. package/lib/typescript/provider.d.ts.map +1 -1
  34. package/lib/typescript/router/index.d.ts +21 -7
  35. package/lib/typescript/router/index.d.ts.map +1 -1
  36. package/lib/typescript/router/router.d.ts.map +1 -1
  37. package/lib/typescript/router/types.d.ts +75 -61
  38. package/lib/typescript/router/types.d.ts.map +1 -1
  39. package/lib/typescript/router/view.d.ts +3 -3
  40. package/lib/typescript/router/view.d.ts.map +1 -1
  41. package/lib/typescript/sheet.d.ts +1 -1
  42. package/lib/typescript/sheet.d.ts.map +1 -1
  43. package/lib/typescript/types.d.ts +32 -15
  44. package/lib/typescript/types.d.ts.map +1 -1
  45. package/package.json +14 -15
  46. package/src/index.ts +7 -7
  47. package/src/manager.ts +66 -22
  48. package/src/provider.tsx +72 -53
  49. package/src/router/index.tsx +46 -9
  50. package/src/router/router.ts +6 -2
  51. package/src/router/types.ts +109 -91
  52. package/src/router/view.tsx +86 -308
  53. package/src/sheet.tsx +111 -123
  54. package/src/types.ts +146 -133
package/README.md CHANGED
@@ -5,7 +5,7 @@ A powerful bottom sheet manager and router for React Native, inspired by [react-
5
5
  ## Features
6
6
 
7
7
  - 🎯 **Simple API** - Show/hide sheets from anywhere in your app
8
- - 🔄 **Stack Behaviors** - Control how sheets stack with `push` (experimental), `switch`, or `replace` behaviors
8
+ - 🔄 **Stack Behaviors** - Control how sheets stack with `push`, `switch`, or `replace` behaviors
9
9
  - 🧭 **React Navigation Integration** - Full support for React Navigation v6/v7 and Expo Router
10
10
  - 📱 **iOS 18 Modal Animation** - Native-like modal sheet animations
11
11
  - 🎨 **TypeScript Support** - Full type safety with IntelliSense
@@ -25,58 +25,54 @@ npm install @niibase/bottom-sheet-manager
25
25
  `SheetManager` helps you save development time by allowing you to reuse modal sheets throughout your app without boilerplate.
26
26
 
27
27
  ```tsx
28
- import { BottomSheet, SheetManager } from '@niibase/bottom-sheet-manager';
29
- import type { SheetProps } from '@niibase/bottom-sheet-manager';
28
+ import { BottomSheet, SheetManager } from "@niibase/bottom-sheet-manager";
29
+ import type { SheetProps } from "@niibase/bottom-sheet-manager";
30
30
  ```
31
31
 
32
32
  Create your BottomSheet component:
33
33
 
34
34
  ```tsx
35
35
  function ExampleSheet({ id }: SheetProps<"example-sheet">) {
36
- return (
37
- <BottomSheet
38
- id={id}
39
- snapPoints={['50%', '90%']}
40
- >
41
- <View>
42
- <Text>Hello World</Text>
43
- </View>
44
- </BottomSheet>
45
- );
36
+ return (
37
+ <BottomSheet id={id} snapPoints={["50%", "90%"]}>
38
+ <BottomSheet.View>
39
+ <Text>Hello World</Text>
40
+ </BottomSheet.View>
41
+ </BottomSheet>
42
+ );
46
43
  }
47
44
 
48
45
  export default ExampleSheet;
49
46
  ```
50
47
 
51
- Register your sheet in a `sheets.ts` file:
48
+ Register your sheet **at module level** in a `sheets.ts` file (never inside JSX):
52
49
 
53
50
  ```ts
54
- import { registerSheet } from '@niibase/bottom-sheet-manager';
55
- import type { SheetDefinition } from '@niibase/bottom-sheet-manager';
56
- import ExampleSheet from './ExampleSheet';
51
+ import type { SheetDefinition } from "@niibase/bottom-sheet-manager";
52
+ import { registerSheet } from "@niibase/bottom-sheet-manager";
57
53
 
58
- registerSheet('example-sheet', ExampleSheet);
54
+ import ExampleSheet from "./ExampleSheet";
55
+
56
+ // ✅ Correct: register at module level
57
+ registerSheet("example-sheet", ExampleSheet);
59
58
 
60
59
  // Extend types for IntelliSense
61
- declare module '@niibase/bottom-sheet-manager' {
62
- interface Sheets {
63
- 'example-sheet': SheetDefinition;
64
- }
60
+ declare module "@niibase/bottom-sheet-manager" {
61
+ interface Sheets {
62
+ "example-sheet": SheetDefinition;
63
+ }
65
64
  }
66
65
  ```
67
66
 
68
- Wrap your app with `SheetProvider`:
67
+ Import `sheets.ts` in your app entry point, then wrap your app with `SheetProvider`:
69
68
 
70
69
  ```tsx
71
- import { SheetProvider } from '@niibase/bottom-sheet-manager';
72
- import './sheets';
70
+ import { SheetProvider } from "@niibase/bottom-sheet-manager";
71
+
72
+ import "./sheets";
73
73
 
74
74
  function App() {
75
- return (
76
- <SheetProvider>
77
- {/* your app components */}
78
- </SheetProvider>
79
- );
75
+ return <SheetProvider>{/* your app components */}</SheetProvider>;
80
76
  }
81
77
  ```
82
78
 
@@ -84,16 +80,23 @@ Show and hide sheets:
84
80
 
85
81
  ```tsx
86
82
  // Show a sheet
87
- SheetManager.show('example-sheet');
83
+ SheetManager.show("example-sheet");
88
84
 
89
85
  // Show with payload
90
- SheetManager.show('example-sheet', { userId: 123 });
86
+ SheetManager.show("example-sheet", { payload: { userId: 123 } });
91
87
 
92
88
  // Hide a sheet
93
- SheetManager.hide('example-sheet');
89
+ SheetManager.hide("example-sheet");
94
90
 
95
91
  // Hide and get return value
96
- const result = await SheetManager.show('example-sheet');
92
+ const result = await SheetManager.show("example-sheet");
93
+
94
+ // Check if a sheet is visible
95
+ SheetManager.isVisible("example-sheet"); // boolean
96
+
97
+ // Get the sheet instance directly
98
+ const instance = SheetManager.get("example-sheet");
99
+ instance?.expand();
97
100
  ```
98
101
 
99
102
  ## Stack Behaviors
@@ -102,16 +105,16 @@ Control how sheets behave when opened on top of existing sheets:
102
105
 
103
106
  - **`switch`** (default): Dismisses the current sheet before showing the new one. Previous sheet is restored when new one closes.
104
107
  - **`replace`**: Swaps the current sheet's content with smooth crossfade animation. Previous sheet is removed from stack.
105
- - **`push`** (experimental): Pushes new sheet on top, creating a navigable stack. Previous sheet remains visible underneath.
108
+ - **`push`**: Pushes new sheet on top, creating a navigable stack. Previous sheet remains visible underneath.
106
109
 
107
110
  ```tsx
108
111
  // Set stack behavior per sheet
109
- <BottomSheet
110
- id={id}
111
- stackBehavior="push" // or "switch" or "replace"
112
- snapPoints={['50%', '90%']}
112
+ <BottomSheet
113
+ id={id}
114
+ stackBehavior="push" // or "switch" or "replace"
115
+ snapPoints={["50%", "90%"]}
113
116
  >
114
- {/* content */}
117
+ {/* content */}
115
118
  </BottomSheet>
116
119
  ```
117
120
 
@@ -123,37 +126,38 @@ Full support for React Navigation v6/v7 and Expo Router. The first screen in the
123
126
 
124
127
  ```tsx
125
128
  import { Slot, withLayoutContext } from "expo-router";
129
+
126
130
  import {
127
- createBottomSheetNavigator,
128
- BottomSheetNavigationOptions,
129
- BottomSheetNavigationEventMap,
130
- BottomSheetNavigationState,
131
+ BottomSheetNavigationEventMap,
132
+ BottomSheetNavigationOptions,
133
+ BottomSheetNavigationState,
134
+ createBottomSheetNavigator,
131
135
  } from "@niibase/bottom-sheet-manager";
132
136
 
133
137
  const { Navigator } = createBottomSheetNavigator();
134
138
  const BottomSheet = withLayoutContext<
135
- BottomSheetNavigationOptions,
136
- typeof Navigator,
137
- BottomSheetNavigationState<any>,
138
- BottomSheetNavigationEventMap
139
+ BottomSheetNavigationOptions,
140
+ typeof Navigator,
141
+ BottomSheetNavigationState<any>,
142
+ BottomSheetNavigationEventMap
139
143
  >(Navigator);
140
144
 
141
145
  export const unstable_settings = {
142
- initialRouteName: "index",
146
+ initialRouteName: "index",
143
147
  };
144
148
 
145
149
  export default function Layout() {
146
- // SSR guard - navigator doesn't work on server
147
- if (typeof window === "undefined") return <Slot />;
148
-
149
- return (
150
- <BottomSheet
151
- screenOptions={{
152
- snapPoints: ['50%', '90%'],
153
- // See: https://gorhom.github.io/react-native-bottom-sheet/modal/props/
154
- }}
155
- />
156
- );
150
+ // SSR guard - navigator doesn't work on server
151
+ if (typeof window === "undefined") return <Slot />;
152
+
153
+ return (
154
+ <BottomSheet
155
+ screenOptions={{
156
+ snapPoints: ["50%", "90%"],
157
+ // See: https://gorhom.github.io/react-native-bottom-sheet/modal/props/
158
+ }}
159
+ />
160
+ );
157
161
  }
158
162
  ```
159
163
 
@@ -165,19 +169,19 @@ import { createBottomSheetNavigator } from "@niibase/bottom-sheet-manager";
165
169
  const { Navigator, Screen } = createBottomSheetNavigator();
166
170
 
167
171
  function App() {
168
- return (
169
- <Navigator>
170
- <Screen name="Home" component={HomeScreen} />
171
- <Screen
172
- name="Details"
173
- component={DetailsSheet}
174
- options={{
175
- snapPoints: ['50%', '100%'],
176
- iosModalSheetTypeOfAnimation: true,
177
- }}
178
- />
179
- </Navigator>
180
- );
172
+ return (
173
+ <Navigator>
174
+ <Screen name="Home" component={HomeScreen} />
175
+ <Screen
176
+ name="Details"
177
+ component={DetailsSheet}
178
+ options={{
179
+ snapPoints: ["50%", "100%"],
180
+ enableBlurKeyboardOnGesture: true,
181
+ }}
182
+ />
183
+ </Navigator>
184
+ );
181
185
  }
182
186
  ```
183
187
 
@@ -189,52 +193,27 @@ Use the navigation object to control sheets programmatically:
189
193
  import { useBottomSheetNavigation } from "@niibase/bottom-sheet-manager";
190
194
 
191
195
  function MySheet() {
192
- const navigation = useBottomSheetNavigation();
193
-
194
- // Snap to a specific index
195
- const handleExpand = () => {
196
- navigation.snapTo(1); // Snap to second snap point
197
- };
198
-
199
- // Dismiss the current sheet
200
- const handleDismiss = () => {
201
- navigation.dismiss();
202
- };
203
-
204
- return (
205
- <View>
206
- <Button title="Expand" onPress={handleExpand} />
207
- <Button title="Dismiss" onPress={handleDismiss} />
208
- </View>
209
- );
196
+ const navigation = useBottomSheetNavigation();
197
+
198
+ // Snap to a specific index
199
+ const handleExpand = () => {
200
+ navigation.snapTo(1); // Snap to second snap point
201
+ };
202
+
203
+ // Dismiss the current sheet
204
+ const handleDismiss = () => {
205
+ navigation.dismiss();
206
+ };
207
+
208
+ return (
209
+ <View>
210
+ <Button title="Expand" onPress={handleExpand} />
211
+ <Button title="Dismiss" onPress={handleDismiss} />
212
+ </View>
213
+ );
210
214
  }
211
215
  ```
212
216
 
213
- ### Known Limitations
214
-
215
- **⚠️ Important:** When using the bottom sheet as a navigator, calling `BottomSheet.Screen` from the `Navigator` will cause the sheet to render immediately.
216
-
217
- To customize the sheet screen options (e.g., change `snapPoints`), you must do it within the screen component itself using `navigation.setOptions()`:
218
-
219
- ```tsx
220
- import { useBottomSheetNavigation } from "@niibase/bottom-sheet-manager";
221
- import { useEffect } from "react";
222
-
223
- export default function ProfileSheet() {
224
- const navigation = useBottomSheetNavigation();
225
-
226
- useEffect(() => {
227
- navigation.setOptions({ snapPoints: ["100%"] });
228
- }, [navigation]);
229
-
230
- return (
231
- // Your sheet content
232
- );
233
- }
234
- ```
235
-
236
- This ensures that the sheet options are set after the component mounts, allowing you to customize the behavior per screen.
237
-
238
217
  ## Hooks
239
218
 
240
219
  ### `useBottomSheetNavigation`
@@ -251,19 +230,19 @@ navigation.dismiss();
251
230
 
252
231
  ### `useSheetRef`
253
232
 
254
- Get a ref to control the sheet instance:
233
+ Get a ref to control the sheet instance. Always use optional chaining (`?.`) since `current` can be null before the sheet is mounted:
255
234
 
256
235
  ```tsx
257
236
  import { useSheetRef } from "@niibase/bottom-sheet-manager";
258
237
 
259
238
  function MySheet({ id }: SheetProps<"my-sheet">) {
260
- const ref = useSheetRef(id);
261
-
262
- // Control the sheet
263
- ref.current?.expand();
264
- ref.current?.collapse();
265
- ref.current?.snapToIndex(1);
266
- ref.current?.close({ value: "result" });
239
+ const ref = useSheetRef<"my-sheet">();
240
+
241
+ // Control the sheet — use ?. since current may be null
242
+ ref.current?.expand();
243
+ ref.current?.collapse();
244
+ ref.current?.snapToIndex(1);
245
+ ref.current?.close({ value: "result" });
267
246
  }
268
247
  ```
269
248
 
@@ -275,40 +254,39 @@ Access the payload passed when showing the sheet:
275
254
  import { useSheetPayload } from "@niibase/bottom-sheet-manager";
276
255
 
277
256
  function MySheet({ id }: SheetProps<"my-sheet">) {
278
- const payload = useSheetPayload<"my-sheet">();
279
- // payload is typed based on your SheetDefinition
257
+ const payload = useSheetPayload<"my-sheet">();
258
+ // payload is typed based on your SheetDefinition
280
259
  }
281
260
  ```
282
261
 
283
- ### `useStackBehaviorContext`
262
+ ### `useSheetStackBehavior`
284
263
 
285
264
  Get the current stack behavior context:
286
265
 
287
266
  ```tsx
288
- import { useStackBehaviorContext } from "@niibase/bottom-sheet-manager";
267
+ import { useSheetStackBehavior } from "@niibase/bottom-sheet-manager";
289
268
 
290
269
  function MySheet() {
291
- const stackBehavior = useStackBehaviorContext();
292
- // Returns: "push" | "replace" | "switch"
270
+ const { behavior, isTransitioning, previousSheetId } = useSheetStackBehavior();
271
+ // behavior: "push" | "replace" | "switch"
293
272
  }
294
273
  ```
295
274
 
296
275
  ### `useOnSheet`
297
276
 
298
- Subscribe to sheet events:
277
+ Subscribe to sheet events. Takes the sheet id, an event type (`"show"`, `"hide"`, or `"onclose"`), and a listener:
299
278
 
300
279
  ```tsx
301
280
  import { useOnSheet } from "@niibase/bottom-sheet-manager";
302
281
 
303
282
  function MyComponent() {
304
- useOnSheet("my-sheet", {
305
- onShow: (payload) => {
306
- console.log("Sheet shown with:", payload);
307
- },
308
- onHide: (returnValue) => {
309
- console.log("Sheet hidden with:", returnValue);
310
- },
311
- });
283
+ useOnSheet("my-sheet", "show", (payload, context) => {
284
+ console.log("Sheet shown with:", payload);
285
+ });
286
+
287
+ useOnSheet("my-sheet", "onclose", (returnValue, context) => {
288
+ console.log("Sheet closed with:", returnValue);
289
+ });
312
290
  }
313
291
  ```
314
292
 
@@ -318,11 +296,11 @@ Enable native-like iOS 18 modal sheet animations:
318
296
 
319
297
  ```tsx
320
298
  <BottomSheet
321
- id={id}
322
- iosModalSheetTypeOfAnimation={true}
323
- snapPoints={['50%', '90%', '100%']}
299
+ id={id}
300
+ iosModalSheetTypeOfAnimation={true}
301
+ snapPoints={["50%", "90%", "100%"]}
324
302
  >
325
- {/* At 90% snap point, content behind scales down with border radius */}
303
+ {/* At 90% snap point, content behind scales down with border radius */}
326
304
  </BottomSheet>
327
305
  ```
328
306
 
@@ -330,27 +308,33 @@ Or in navigation options:
330
308
 
331
309
  ```tsx
332
310
  <Screen
333
- name="Details"
334
- component={DetailsSheet}
335
- options={{
336
- iosModalSheetTypeOfAnimation: true,
337
- snapPoints: ['50%', '90%', '100%'],
338
- }}
311
+ name="Details"
312
+ component={DetailsSheet}
313
+ options={{
314
+ iosModalSheetTypeOfAnimation: true,
315
+ snapPoints: ["50%", "90%", "100%"],
316
+ }}
339
317
  />
340
318
  ```
341
319
 
320
+ > **Note:** When `iosModalSheetTypeOfAnimation` is `false` (the default), no animated wrappers are added to the component tree, keeping your app's layout overhead minimal.
321
+
342
322
  ## Advanced Features
343
323
 
344
324
  ### Custom Contexts
345
325
 
346
- Use separate contexts for nested sheets or modals:
326
+ Use separate contexts for nested sheets or modals.
327
+
328
+ > **Important:** Context names must be unique across all `SheetProvider` instances in your app.
347
329
 
348
330
  ```tsx
349
- // In a modal or nested sheet
350
- <SheetProvider context="modal-context">
351
- {/* Register sheets for this context */}
352
- {registerSheet('local-sheet', LocalSheet, 'modal-context')}
353
- </SheetProvider>
331
+ // Register at module level not inside JSX
332
+ registerSheet("local-sheet", LocalSheet, "modal-context");
333
+
334
+ // Then use the provider where you want the sheet to appear
335
+ function MyModal() {
336
+ return <SheetProvider context="modal-context">{/* Modal content */}</SheetProvider>;
337
+ }
354
338
  ```
355
339
 
356
340
  ### Sheet Instance Methods
@@ -358,7 +342,8 @@ Use separate contexts for nested sheets or modals:
358
342
  Control sheets programmatically:
359
343
 
360
344
  ```tsx
361
- const instance = SheetManager.get('example-sheet');
345
+ // Get the sheet instance
346
+ const instance = SheetManager.get("example-sheet");
362
347
 
363
348
  // Expand to maximum snap point
364
349
  instance?.expand();
@@ -370,23 +355,44 @@ instance?.collapse();
370
355
  instance?.snapToIndex(1);
371
356
 
372
357
  // Snap to specific position
373
- instance?.snapToPosition('75%');
358
+ instance?.snapToPosition("75%");
374
359
 
375
360
  // Close with return value
376
361
  instance?.close({ value: { success: true } });
377
362
  ```
378
363
 
364
+ ### Checking Visibility
365
+
366
+ ```tsx
367
+ // Check if a sheet is currently open
368
+ const isOpen = SheetManager.isVisible("example-sheet");
369
+
370
+ // Check in a specific context
371
+ const isOpen = SheetManager.isVisible("example-sheet", "modal-context");
372
+ ```
373
+
379
374
  ### Animation Configuration
380
375
 
381
376
  Customize animations:
382
377
 
383
378
  ```tsx
384
379
  instance?.expand({
385
- animationConfigs: {
386
- type: 'spring',
387
- damping: 20,
388
- stiffness: 90,
389
- },
380
+ animationConfigs: {
381
+ type: "spring",
382
+ damping: 20,
383
+ stiffness: 90,
384
+ },
385
+ });
386
+ ```
387
+
388
+ ### Reset (for Testing)
389
+
390
+ ```tsx
391
+ import { SheetManager } from "@niibase/bottom-sheet-manager";
392
+
393
+ // In your test setup/teardown
394
+ afterEach(() => {
395
+ SheetManager.reset();
390
396
  });
391
397
  ```
392
398
 
@@ -396,45 +402,51 @@ instance?.expand({
396
402
 
397
403
  Global manager for showing and hiding sheets.
398
404
 
399
- ```tsx
400
- // Show a sheet
401
- SheetManager.show<Id extends SheetIds>(
402
- id: Id,
403
- payload?: SheetPayload<Id>
404
- ): Promise<SheetReturnValue<Id>>
405
-
406
- // Hide a sheet
407
- SheetManager.hide(id: SheetIds): void
408
-
409
- // Get sheet instance
410
- SheetManager.get(id: SheetIds): BottomSheetInstance<Id> | undefined
411
- ```
405
+ | Method | Signature | Description |
406
+ | ----------- | ------------------------------------------------------ | --------------------------------------------- |
407
+ | `show` | `show(id, options?) → Promise<ReturnValue>` | Show a sheet, optionally with payload |
408
+ | `hide` | `hide(id, options?) → Promise<ReturnValue>` | Hide a specific sheet |
409
+ | `hideAll` | `hideAll(id?) → void` | Hide all open sheets |
410
+ | `get` | `get(id, context?) → BottomSheetInstance \| undefined` | Get the sheet's imperative instance |
411
+ | `isVisible` | `isVisible(id, context?) → boolean` | Check if a sheet is currently visible |
412
+ | `replace` | `replace(id, options?) → Promise<ReturnValue>` | Show with `replace` stack behavior |
413
+ | `push` | `push(id, options?) → Promise<ReturnValue>` | Show with `push` stack behavior |
414
+ | `pop` | `pop() → void` | Close top-most pushed sheet |
415
+ | `reset` | `reset() → void` | Reset all internal state (useful for testing) |
412
416
 
413
417
  ### `BottomSheet` Props
414
418
 
415
419
  All props from `@gorhom/bottom-sheet` are supported, plus:
416
420
 
417
- | Prop | Type | Default | Description |
418
- |------|------|---------|-------------|
419
- | `id` | `SheetID<SheetIds>` | - | Unique identifier for the sheet |
420
- | `stackBehavior` | `"push" \| "replace" \| "switch"` | `"switch"` | How sheets stack when opened (push is experimental) |
421
- | `iosModalSheetTypeOfAnimation` | `boolean` | `false` | Enable iOS 18 modal animation |
422
- | `clickThrough` | `boolean` | `false` | Allow tapping through backdrop |
423
- | `opacity` | `number` | `0.45` | Backdrop opacity |
424
- | `hardwareBackPressToClose` | `boolean` | `true` | Close on hardware back button |
425
- | `onClose` | `(data?: unknown) => unknown` | - | Callback when sheet closes |
426
- | `onBeforeShow` | `(data?: unknown) => void` | - | Callback before sheet shows |
421
+ | Prop | Type | Default | Description |
422
+ | ------------------------------ | --------------------------------- | ---------- | ------------------------------------------------------------------------------------- |
423
+ | `id` | `SheetID<SheetIds>` | - | Unique identifier for the sheet |
424
+ | `stackBehavior` | `"push" \| "replace" \| "switch"` | `"switch"` | How sheets stack when opened |
425
+ | `iosModalSheetTypeOfAnimation` | `boolean` | `false` | Enable iOS 18 modal animation |
426
+ | `clickThrough` | `boolean` | `false` | Allow tapping through backdrop |
427
+ | `opacity` | `number` | `0.45` | Backdrop opacity |
428
+ | `hardwareBackPressToClose` | `boolean` | `true` | Close on hardware back button (Android) |
429
+ | `onClose` | `(data?) => ReturnValue \| void` | - | Callback when sheet closes; return a value to override what's sent back to the caller |
430
+ | `onBeforeShow` | `(data?) => void` | - | Callback before sheet shows |
431
+
432
+ ### `SheetProvider` Props
433
+
434
+ | Prop | Type | Default | Description |
435
+ | ------------- | ---------------- | ----------- | -------------------------------------------------------------------------------------------------- |
436
+ | `context` | `string` | `"global"` | Unique name for this provider context |
437
+ | `statusBar` | `StatusBarStyle` | `"default"` | Status bar style when a full-screen sheet is open |
438
+ | `scaleConfig` | `object` | - | Controls the iOS 18-style scale/translate/radius animation applied to the content behind the sheet |
427
439
 
428
440
  ### `BottomSheetNavigationOptions`
429
441
 
430
442
  Screen options for navigation-based sheets:
431
443
 
432
- | Option | Type | Default | Description |
433
- |--------|------|---------|-------------|
434
- | `snapPoints` | `Array<string \| number>` | `['66%']` | Snap points for the sheet |
435
- | `clickThrough` | `boolean` | `false` | Allow tapping through backdrop |
436
- | `iosModalSheetTypeOfAnimation` | `boolean` | `false` | Enable iOS 18 modal animation |
437
- | `opacity` | `number` | `0.45` | Backdrop opacity |
444
+ | Option | Type | Default | Description |
445
+ | ------------------------------ | ------------------------- | --------- | ------------------------------ |
446
+ | `snapPoints` | `Array<string \| number>` | `['66%']` | Snap points for the sheet |
447
+ | `clickThrough` | `boolean` | `false` | Allow tapping through backdrop |
448
+ | `iosModalSheetTypeOfAnimation` | `boolean` | `false` | Enable iOS 18 modal animation |
449
+ | `opacity` | `number` | `0.45` | Backdrop opacity |
438
450
 
439
451
  ### Navigation Actions
440
452
 
@@ -456,7 +468,7 @@ navigation.dispatch(BottomSheetActions.remove());
456
468
  The source code for the example (showcase) app is under the [/example](/example/) directory. It includes:
457
469
 
458
470
  - Basic sheet usage
459
- - Stack behavior demos (push (experimental), replace, switch)
471
+ - Stack behavior demos (push, replace, switch) including mixed stacks
460
472
  - React Navigation integration
461
473
  - iOS modal animation examples
462
474
  - Navigation actions and hooks usage
@@ -478,4 +490,3 @@ Contributions are welcome! Please feel free to submit a Pull Request.
478
490
  [⬆ Back to Top](#bottom-sheet-router--manager)
479
491
 
480
492
  </div>
481
-
@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", {
6
6
  var _exportNames = {
7
7
  BottomSheet: true,
8
8
  SheetManager: true,
9
+ PrivateManager: true,
9
10
  SheetProvider: true,
10
11
  useSheetPayload: true,
11
12
  useSheetRef: true,
12
13
  useOnSheet: true,
13
- useStackBehaviorContext: true,
14
+ useSheetStackBehavior: true,
14
15
  registerSheet: true
15
16
  };
16
17
  Object.defineProperty(exports, "BottomSheet", {
@@ -19,6 +20,12 @@ Object.defineProperty(exports, "BottomSheet", {
19
20
  return _sheet.default;
20
21
  }
21
22
  });
23
+ Object.defineProperty(exports, "PrivateManager", {
24
+ enumerable: true,
25
+ get: function () {
26
+ return _manager.PrivateManager;
27
+ }
28
+ });
22
29
  Object.defineProperty(exports, "SheetManager", {
23
30
  enumerable: true,
24
31
  get: function () {
@@ -55,7 +62,7 @@ Object.defineProperty(exports, "useSheetRef", {
55
62
  return _provider.useSheetRef;
56
63
  }
57
64
  });
58
- Object.defineProperty(exports, "useStackBehaviorContext", {
65
+ Object.defineProperty(exports, "useSheetStackBehavior", {
59
66
  enumerable: true,
60
67
  get: function () {
61
68
  return _provider.useStackBehaviorContext;
@@ -1 +1 @@
1
- {"version":3,"names":["_sheet","_interopRequireDefault","require","_manager","_router","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_types","_provider","e","__esModule","default"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAAAG,MAAA,CAAAC,IAAA,CAAAF,OAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,OAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,OAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,MAAA,GAAAf,OAAA;AAAAG,MAAA,CAAAC,IAAA,CAAAW,MAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,MAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,MAAA,CAAAT,GAAA;IAAA;EAAA;AAAA;AACA,IAAAU,SAAA,GAAAhB,OAAA;AAOoB,SAAAD,uBAAAkB,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}
1
+ {"version":3,"names":["_sheet","_interopRequireDefault","require","_manager","_router","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_types","_provider","e","__esModule","default"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAAAG,MAAA,CAAAC,IAAA,CAAAF,OAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,OAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,OAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,MAAA,GAAAf,OAAA;AAAAG,MAAA,CAAAC,IAAA,CAAAW,MAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,MAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,MAAA,CAAAT,GAAA;IAAA;EAAA;AAAA;AACA,IAAAU,SAAA,GAAAhB,OAAA;AAOoB,SAAAD,uBAAAkB,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}