@niibase/bottom-sheet-manager 1.4.4 → 1.4.6
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.
- package/README.md +230 -14
- package/lib/commonjs/index.js +10 -2
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/router/view.js +2 -2
- package/lib/commonjs/router/view.js.map +1 -1
- package/lib/commonjs/{sheet.js → sheets/gorhom.js} +29 -74
- package/lib/commonjs/sheets/gorhom.js.map +1 -0
- package/lib/commonjs/sheets/shared.js +69 -0
- package/lib/commonjs/sheets/shared.js.map +1 -0
- package/lib/commonjs/sheets/truesheet.js +237 -0
- package/lib/commonjs/sheets/truesheet.js.map +1 -0
- package/lib/module/index.js +2 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/router/view.js +1 -1
- package/lib/module/router/view.js.map +1 -1
- package/lib/module/{sheet.js → sheets/gorhom.js} +29 -74
- package/lib/module/sheets/gorhom.js.map +1 -0
- package/lib/module/sheets/shared.js +60 -0
- package/lib/module/sheets/shared.js.map +1 -0
- package/lib/module/sheets/truesheet.js +230 -0
- package/lib/module/sheets/truesheet.js.map +1 -0
- package/lib/typescript/index.d.ts +2 -1
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/{sheet.d.ts → sheets/gorhom.d.ts} +2 -2
- package/lib/typescript/sheets/gorhom.d.ts.map +1 -0
- package/lib/typescript/sheets/shared.d.ts +15 -0
- package/lib/typescript/sheets/shared.d.ts.map +1 -0
- package/lib/typescript/sheets/truesheet.d.ts +23 -0
- package/lib/typescript/sheets/truesheet.d.ts.map +1 -0
- package/lib/typescript/types.d.ts +5 -0
- package/lib/typescript/types.d.ts.map +1 -1
- package/package.json +13 -6
- package/src/index.ts +2 -1
- package/src/router/view.tsx +1 -1
- package/src/{sheet.tsx → sheets/gorhom.tsx} +31 -111
- package/src/sheets/shared.ts +108 -0
- package/src/sheets/truesheet.tsx +363 -0
- package/src/types.ts +6 -0
- package/lib/commonjs/sheet.js.map +0 -1
- package/lib/module/sheet.js.map +0 -1
- package/lib/typescript/sheet.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Bottom Sheet Router & Manager
|
|
2
2
|
|
|
3
|
-
A powerful bottom sheet manager and router for React Native, inspired by [react-native-actions-sheet](https://github.com/ammarahm-ed/@repo/bottom-sheet) and built on top of [@gorhom/bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet).
|
|
3
|
+
A powerful bottom sheet manager and router for React Native, inspired by [react-native-actions-sheet](https://github.com/ammarahm-ed/@repo/bottom-sheet) and built on top of [@gorhom/bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet) with optional support for [@lodev09/react-native-true-sheet](https://github.com/lodev09/react-native-true-sheet).
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
@@ -11,6 +11,7 @@ A powerful bottom sheet manager and router for React Native, inspired by [react-
|
|
|
11
11
|
- 🎨 **TypeScript Support** - Full type safety with IntelliSense
|
|
12
12
|
- ⚡ **Performance Optimized** - High-performance event system with O(1) lookups
|
|
13
13
|
- 🔌 **Flexible Hooks** - Rich set of hooks for advanced use cases
|
|
14
|
+
- 🪟 **Dual Vendor Support** - Use `@gorhom/bottom-sheet` (JS-driven) or `@lodev09/react-native-true-sheet` (native-driven)
|
|
14
15
|
|
|
15
16
|
## Installation
|
|
16
17
|
|
|
@@ -18,9 +19,20 @@ A powerful bottom sheet manager and router for React Native, inspired by [react-
|
|
|
18
19
|
npm install @niibase/bottom-sheet-manager
|
|
19
20
|
```
|
|
20
21
|
|
|
22
|
+
## Vendors
|
|
23
|
+
|
|
24
|
+
This library supports two bottom sheet implementations. Choose the one that fits your needs:
|
|
25
|
+
|
|
26
|
+
| Vendor | Import | Sheet Component | Platform | Best For |
|
|
27
|
+
| ------------------------------------ | ------------------------ | ---------------------------------------------------------------------- | ----------------- | -------------------------------------------------------------------------- |
|
|
28
|
+
| **@gorhom/bottom-sheet** (default) | `import { BottomSheet }` | JS-driven, highly customizable | iOS + Android | Full control over animations, custom handles, backdrop, and sub-components |
|
|
29
|
+
| **@lodev09/react-native-true-sheet** | `import { TrueSheet }` | Native-driven (UISheetPresentationController / Material 3 BottomSheet) | iOS 16+ + Android | True native look & feel, smaller bundle, less JS overhead |
|
|
30
|
+
|
|
31
|
+
Both vendors share the same manager API (`SheetManager.show`, `SheetManager.hide`, `registerSheet`, `useSheetRef`, etc.) — the only difference is the sheet component and its props.
|
|
32
|
+
|
|
21
33
|
## Quick Start
|
|
22
34
|
|
|
23
|
-
###
|
|
35
|
+
### Using @gorhom/bottom-sheet (default)
|
|
24
36
|
|
|
25
37
|
`SheetManager` helps you save development time by allowing you to reuse modal sheets throughout your app without boilerplate.
|
|
26
38
|
|
|
@@ -45,6 +57,31 @@ function ExampleSheet({ id }: SheetProps<"example-sheet">) {
|
|
|
45
57
|
export default ExampleSheet;
|
|
46
58
|
```
|
|
47
59
|
|
|
60
|
+
### Using @lodev09/react-native-true-sheet
|
|
61
|
+
|
|
62
|
+
Import `TrueSheet` instead of `BottomSheet`. The component API uses native-oriented props:
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import { SheetManager, TrueSheet } from "@niibase/bottom-sheet-manager";
|
|
66
|
+
import type { SheetProps } from "@niibase/bottom-sheet-manager";
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
function ExampleSheet({ id }: SheetProps<"example-sheet">) {
|
|
71
|
+
return (
|
|
72
|
+
<TrueSheet id={id} detents={[0.5, 1]} cornerRadius={24} grabber scrollable>
|
|
73
|
+
<ScrollView style={{ padding: 16 }}>
|
|
74
|
+
<Text>Hello from TrueSheet</Text>
|
|
75
|
+
</ScrollView>
|
|
76
|
+
</TrueSheet>
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
export default ExampleSheet;
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Registration (same for both vendors)
|
|
84
|
+
|
|
48
85
|
Register your sheet **at module level** in a `sheets.ts` file (never inside JSX):
|
|
49
86
|
|
|
50
87
|
```ts
|
|
@@ -108,14 +145,23 @@ Control how sheets behave when opened on top of existing sheets:
|
|
|
108
145
|
- **`push`**: Pushes new sheet on top, creating a navigable stack. Previous sheet remains visible underneath.
|
|
109
146
|
|
|
110
147
|
```tsx
|
|
111
|
-
//
|
|
148
|
+
// Using BottomSheet (gorhom)
|
|
112
149
|
<BottomSheet
|
|
113
150
|
id={id}
|
|
114
|
-
stackBehavior="push"
|
|
151
|
+
stackBehavior="push"
|
|
115
152
|
snapPoints={["50%", "90%"]}
|
|
116
153
|
>
|
|
117
154
|
{/* content */}
|
|
118
155
|
</BottomSheet>
|
|
156
|
+
|
|
157
|
+
// Using TrueSheet
|
|
158
|
+
<TrueSheet
|
|
159
|
+
id={id}
|
|
160
|
+
stackBehavior="push"
|
|
161
|
+
detents={[0.5, 0.9]}
|
|
162
|
+
>
|
|
163
|
+
{/* content */}
|
|
164
|
+
</TrueSheet>
|
|
119
165
|
```
|
|
120
166
|
|
|
121
167
|
## React Navigation Integration
|
|
@@ -126,7 +172,6 @@ Full support for React Navigation v6/v7 and Expo Router. The first screen in the
|
|
|
126
172
|
|
|
127
173
|
```tsx
|
|
128
174
|
import { Slot, withLayoutContext } from "expo-router";
|
|
129
|
-
|
|
130
175
|
import {
|
|
131
176
|
BottomSheetNavigationEventMap,
|
|
132
177
|
BottomSheetNavigationOptions,
|
|
@@ -290,6 +335,120 @@ function MyComponent() {
|
|
|
290
335
|
}
|
|
291
336
|
```
|
|
292
337
|
|
|
338
|
+
## Styling with NativeWind / Uniwind
|
|
339
|
+
|
|
340
|
+
Both `BottomSheet` and `TrueSheet` are third-party components — `className` does **not** work on them out of the box. You must wrap or register them so the styling framework knows how to convert class names to native styles.
|
|
341
|
+
|
|
342
|
+
### Uniwind — wrapping with `withUniwind`
|
|
343
|
+
|
|
344
|
+
**Uniwind** provides a `withUniwind` HOC that converts `className` → `style` and color props → `*ColorClassName`. Wrap **outside your component** (at module level) so the HOC only runs once:
|
|
345
|
+
|
|
346
|
+
```tsx
|
|
347
|
+
import { BottomSheet } from "@niibase/bottom-sheet-manager";
|
|
348
|
+
import { withUniwind } from "uniwind";
|
|
349
|
+
|
|
350
|
+
// ✅ Wrap at module level — not inside JSX
|
|
351
|
+
const StyledBottomSheet = withUniwind(BottomSheet);
|
|
352
|
+
|
|
353
|
+
function MySheet({ id }: SheetProps<"my-sheet">) {
|
|
354
|
+
return (
|
|
355
|
+
<StyledBottomSheet
|
|
356
|
+
id={id}
|
|
357
|
+
snapPoints={["50%", "90%"]}
|
|
358
|
+
className="bg-white rounded-t-3xl"
|
|
359
|
+
handleIndicatorClassName="bg-gray-300 w-10"
|
|
360
|
+
>
|
|
361
|
+
{/* content */}
|
|
362
|
+
</StyledBottomSheet>
|
|
363
|
+
);
|
|
364
|
+
}
|
|
365
|
+
```
|
|
366
|
+
|
|
367
|
+
For **TrueSheet**:
|
|
368
|
+
|
|
369
|
+
```tsx
|
|
370
|
+
import { TrueSheet } from "@niibase/bottom-sheet-manager";
|
|
371
|
+
import { withUniwind } from "uniwind";
|
|
372
|
+
|
|
373
|
+
const StyledTrueSheet = withUniwind(TrueSheet);
|
|
374
|
+
|
|
375
|
+
function MySheet({ id }: SheetProps<"my-sheet">) {
|
|
376
|
+
return (
|
|
377
|
+
<StyledTrueSheet
|
|
378
|
+
id={id}
|
|
379
|
+
detents={[0.5, 1]}
|
|
380
|
+
cornerRadius={24}
|
|
381
|
+
grabber
|
|
382
|
+
className="bg-white"
|
|
383
|
+
>
|
|
384
|
+
<ScrollView className="gap-4 px-4 py-6">
|
|
385
|
+
<Text className="text-lg font-bold">Hello TrueSheet</Text>
|
|
386
|
+
</ScrollView>
|
|
387
|
+
</StyledTrueSheet>
|
|
388
|
+
);
|
|
389
|
+
}
|
|
390
|
+
```
|
|
391
|
+
|
|
392
|
+
**NativeWind** uses `cssInterop` to tell the Babel plugin how to convert `className` on a given component. Call it **once at your app entry point** (e.g. your `_layout.tsx`):
|
|
393
|
+
|
|
394
|
+
```tsx
|
|
395
|
+
import { BottomSheet, TrueSheet } from "@niibase/bottom-sheet-manager";
|
|
396
|
+
import { cssInterop } from "nativewind";
|
|
397
|
+
|
|
398
|
+
// Register once at app entry
|
|
399
|
+
cssInterop(BottomSheet, { className: "style" });
|
|
400
|
+
cssInterop(TrueSheet, { className: "style" });
|
|
401
|
+
```
|
|
402
|
+
|
|
403
|
+
Now `className` works directly on the registered components:
|
|
404
|
+
|
|
405
|
+
```tsx
|
|
406
|
+
function MySheet({ id }: SheetProps<"my-sheet">) {
|
|
407
|
+
return (
|
|
408
|
+
<BottomSheet
|
|
409
|
+
id={id}
|
|
410
|
+
snapPoints={["50%", "90%"]}
|
|
411
|
+
className="bg-white rounded-t-3xl"
|
|
412
|
+
>
|
|
413
|
+
<Text className="text-lg font-bold">Hello World</Text>
|
|
414
|
+
</BottomSheet>
|
|
415
|
+
);
|
|
416
|
+
}
|
|
417
|
+
```
|
|
418
|
+
|
|
419
|
+
```tsx
|
|
420
|
+
function MySheet({ id }: SheetProps<"my-sheet">) {
|
|
421
|
+
return (
|
|
422
|
+
<TrueSheet
|
|
423
|
+
id={id}
|
|
424
|
+
detents={[0.5, 1]}
|
|
425
|
+
className="bg-white"
|
|
426
|
+
scrollable
|
|
427
|
+
>
|
|
428
|
+
<ScrollView className="gap-4 px-4 py-6">
|
|
429
|
+
<Text className="text-lg font-bold">Hello TrueSheet</Text>
|
|
430
|
+
</ScrollView>
|
|
431
|
+
</BottomSheet>
|
|
432
|
+
);
|
|
433
|
+
}
|
|
434
|
+
```
|
|
435
|
+
|
|
436
|
+
### TrueSheet-Specific Styling Props
|
|
437
|
+
|
|
438
|
+
| Prop | Type | Description |
|
|
439
|
+
| ----------------- | ------------------------------------------------------------------- | ----------------------------------------------------------------- |
|
|
440
|
+
| `cornerRadius` | `number` | Border radius of the sheet (use `0` for sharp corners) |
|
|
441
|
+
| `backgroundColor` | `ColorValue` | Sheet background color (use to override liquid glass on iOS 26+) |
|
|
442
|
+
| `grabber` | `boolean` | Show a native drag handle (default `true`) |
|
|
443
|
+
| `grabberOptions` | `{ width?, height?, topMargin?, cornerRadius?, color?, adaptive? }` | Customize the grabber appearance |
|
|
444
|
+
| `dimmed` | `boolean` | Dim the background (default `true`) |
|
|
445
|
+
| `dismissible` | `boolean` | Allow interactive dismissal (default `true`) |
|
|
446
|
+
| `draggable` | `boolean` | Allow dragging to resize (default `true`) |
|
|
447
|
+
| `backgroundBlur` | `BackgroundBlur` | iOS blur style behind the sheet (e.g. `"system-material"`) |
|
|
448
|
+
| `blurOptions` | `{ intensity?, interaction? }` | Fine-tune the blur effect (iOS only) |
|
|
449
|
+
| `elevation` | `number` | Sheet shadow elevation (Android/Web, default `4`) |
|
|
450
|
+
| `insetAdjustment` | `"automatic" \| "never"` | Safe area inset behavior for sheet height (default `"automatic"`) |
|
|
451
|
+
|
|
293
452
|
## iOS 18 Modal Animation
|
|
294
453
|
|
|
295
454
|
Enable native-like iOS 18 modal sheet animations:
|
|
@@ -318,6 +477,8 @@ Or in navigation options:
|
|
|
318
477
|
```
|
|
319
478
|
|
|
320
479
|
> **Note:** When `iosModalSheetTypeOfAnimation` is `false` (the default), no animated wrappers are added to the component tree, keeping your app's layout overhead minimal.
|
|
480
|
+
>
|
|
481
|
+
> **TrueSheet Android behavior:** When `iosModalSheetTypeOfAnimation` is `true`, Android normalizes full-screen detents so `1` maps to `0.9` (and `0.9` stays `0.9`) to keep modal-style animation behavior consistent.
|
|
321
482
|
|
|
322
483
|
## Advanced Features
|
|
323
484
|
|
|
@@ -414,21 +575,75 @@ Global manager for showing and hiding sheets.
|
|
|
414
575
|
| `pop` | `pop() → void` | Close top-most pushed sheet |
|
|
415
576
|
| `reset` | `reset() → void` | Reset all internal state (useful for testing) |
|
|
416
577
|
|
|
417
|
-
### `BottomSheet`
|
|
418
|
-
|
|
419
|
-
All props from `@gorhom/bottom-sheet` are supported, plus:
|
|
578
|
+
### Shared Props (applicable to both `BottomSheet` and `TrueSheet`)
|
|
420
579
|
|
|
421
580
|
| Prop | Type | Default | Description |
|
|
422
581
|
| ------------------------------ | --------------------------------- | ---------- | ------------------------------------------------------------------------------------- |
|
|
423
582
|
| `id` | `SheetID<SheetIds>` | - | Unique identifier for the sheet |
|
|
424
583
|
| `stackBehavior` | `"push" \| "replace" \| "switch"` | `"switch"` | How sheets stack when opened |
|
|
425
|
-
| `iosModalSheetTypeOfAnimation` | `boolean` | `false` | Enable iOS 18 modal animation
|
|
426
|
-
| `
|
|
584
|
+
| `iosModalSheetTypeOfAnimation` | `boolean` | `false` | Enable iOS 18 modal animation (for TrueSheet on Android, detent `1` is normalized to `0.9`) |
|
|
585
|
+
| `passThrough` | `boolean` | `false` | Allow tapping through backdrop |
|
|
427
586
|
| `opacity` | `number` | `0.45` | Backdrop opacity |
|
|
428
587
|
| `hardwareBackPressToClose` | `boolean` | `true` | Close on hardware back button (Android) |
|
|
429
588
|
| `onClose` | `(data?) => ReturnValue \| void` | - | Callback when sheet closes; return a value to override what's sent back to the caller |
|
|
430
589
|
| `onBeforeShow` | `(data?) => void` | - | Callback before sheet shows |
|
|
431
590
|
|
|
591
|
+
### `BottomSheet` Props (gorhom-specific)
|
|
592
|
+
|
|
593
|
+
All props from `@gorhom/bottom-sheet` are supported, including:
|
|
594
|
+
|
|
595
|
+
| Prop | Type | Description |
|
|
596
|
+
| ---------------------- | ------------------------- | ------------------------------------------ |
|
|
597
|
+
| `snapPoints` | `Array<string \| number>` | Snap points (e.g. `["25%", "50%", "90%"]`) |
|
|
598
|
+
| `enableDynamicSizing` | `boolean` | Size sheet to fit content |
|
|
599
|
+
| `enablePanDownToClose` | `boolean` | Swipe down to dismiss |
|
|
600
|
+
| `handleComponent` | `React.FC` | Custom handle component |
|
|
601
|
+
| `footerComponent` | `React.FC` | Custom footer component |
|
|
602
|
+
| `backgroundStyle` | `ViewStyle` | Background container style |
|
|
603
|
+
| `handleIndicatorStyle` | `ViewStyle` | Handle indicator style |
|
|
604
|
+
|
|
605
|
+
Sub-components available on `BottomSheet`:
|
|
606
|
+
|
|
607
|
+
- `BottomSheet.View` — Wrapper view with proper insets
|
|
608
|
+
- `BottomSheet.ScrollView` — ScrollView optimized for bottom sheets
|
|
609
|
+
- `BottomSheet.FlatList` — FlatList optimized for bottom sheets
|
|
610
|
+
- `BottomSheet.SectionList` — SectionList optimized for bottom sheets
|
|
611
|
+
- `BottomSheet.TextInput` — TextInput that works with keyboard handling
|
|
612
|
+
- `BottomSheet.Handle` — Custom drag handle
|
|
613
|
+
- `BottomSheet.Footer` — Footer component
|
|
614
|
+
- `BottomSheet.Backdrop` — Custom backdrop component
|
|
615
|
+
|
|
616
|
+
### `TrueSheet` Props (native-specific)
|
|
617
|
+
|
|
618
|
+
| Prop | Type | Default | Description |
|
|
619
|
+
| ----------------------- | ------------------------------- | ------------- | ---------------------------------------------------------------- |
|
|
620
|
+
| `detents` | `SheetDetent[]` | `[0.5, 1]` | Detent heights (`'auto'`, or `0`–`1` fraction). Max 3. With `iosModalSheetTypeOfAnimation` on Android, `1` is treated as `0.9` |
|
|
621
|
+
| `cornerRadius` | `number` | - | Sheet corner radius (`0` for sharp) |
|
|
622
|
+
| `grabber` | `boolean` | `true` | Show native drag handle |
|
|
623
|
+
| `grabberOptions` | `GrabberOptions` | - | Customize grabber appearance |
|
|
624
|
+
| `scrollable` | `boolean` | `false` | Enable native scroll handling (auto-detects ScrollView/FlatList) |
|
|
625
|
+
| `scrollableOptions` | `ScrollableOptions` | - | Keyboard offset, scroll expansion behavior |
|
|
626
|
+
| `dimmed` | `boolean` | `true` | Dim the background |
|
|
627
|
+
| `dimmedDetentIndex` | `number` | `0` | Detent at which dimming starts |
|
|
628
|
+
| `dismissible` | `boolean` | `true` | Allow interactive dismissal |
|
|
629
|
+
| `draggable` | `boolean` | `true` | Allow dragging to resize |
|
|
630
|
+
| `header` | `ComponentType \| ReactElement` | - | Fixed header pinned to top |
|
|
631
|
+
| `footer` | `ComponentType \| ReactElement` | - | Floating footer pinned to bottom |
|
|
632
|
+
| `headerStyle` | `ViewStyle` | - | Header container style |
|
|
633
|
+
| `footerStyle` | `ViewStyle` | - | Footer container style |
|
|
634
|
+
| `backgroundColor` | `ColorValue` | - | Sheet background color |
|
|
635
|
+
| `backgroundBlur` | `BackgroundBlur` | - | iOS blur style |
|
|
636
|
+
| `blurOptions` | `BlurOptions` | - | Blur intensity/interaction options |
|
|
637
|
+
| `elevation` | `number` | `4` | Android/Web shadow depth |
|
|
638
|
+
| `maxContentHeight` | `number` | - | Max content height override |
|
|
639
|
+
| `maxContentWidth` | `number` | - | Max content width override |
|
|
640
|
+
| `anchor` | `"left" \| "center" \| "right"` | `"center"` | Horizontal anchor (tablet/landscape) |
|
|
641
|
+
| `anchorOffset` | `number` | `16` | Offset from edge when anchored |
|
|
642
|
+
| `pageSizing` | `boolean` | `true` | iPad page sheet style (iOS 17+) |
|
|
643
|
+
| `insetAdjustment` | `"automatic" \| "never"` | `"automatic"` | Safe area inset behavior |
|
|
644
|
+
| `initialDetentIndex` | `number` | `-1` | Auto-present at this detent on mount |
|
|
645
|
+
| `initialDetentAnimated` | `boolean` | `true` | Animate initial presentation |
|
|
646
|
+
|
|
432
647
|
### `SheetProvider` Props
|
|
433
648
|
|
|
434
649
|
| Prop | Type | Default | Description |
|
|
@@ -444,7 +659,7 @@ Screen options for navigation-based sheets:
|
|
|
444
659
|
| Option | Type | Default | Description |
|
|
445
660
|
| ------------------------------ | ------------------------- | --------- | ------------------------------ |
|
|
446
661
|
| `snapPoints` | `Array<string \| number>` | `['66%']` | Snap points for the sheet |
|
|
447
|
-
| `
|
|
662
|
+
| `passThrough` | `boolean` | `false` | Allow tapping through backdrop |
|
|
448
663
|
| `iosModalSheetTypeOfAnimation` | `boolean` | `false` | Enable iOS 18 modal animation |
|
|
449
664
|
| `opacity` | `number` | `0.45` | Backdrop opacity |
|
|
450
665
|
|
|
@@ -467,10 +682,11 @@ navigation.dispatch(BottomSheetActions.remove());
|
|
|
467
682
|
|
|
468
683
|
The source code for the example (showcase) app is under the [/example](/example/) directory. It includes:
|
|
469
684
|
|
|
470
|
-
- Basic sheet usage
|
|
471
|
-
- Stack behavior demos (push, replace, switch)
|
|
685
|
+
- Basic sheet usage (gorhom and TrueSheet)
|
|
686
|
+
- Stack behavior demos (push, replace, switch) for both vendors
|
|
472
687
|
- React Navigation integration
|
|
473
688
|
- iOS modal animation examples
|
|
689
|
+
- TrueSheet-specific demos (header/footer, grabber, scrollable, stacking)
|
|
474
690
|
- Navigation actions and hooks usage
|
|
475
691
|
|
|
476
692
|
## Contributing
|
|
@@ -485,7 +701,7 @@ Contributions are welcome! Please feel free to submit a Pull Request.
|
|
|
485
701
|
|
|
486
702
|
<div align="center">
|
|
487
703
|
|
|
488
|
-
**Built with ❤️ by [@divineniiquaye](https://github.com/divineniiquaye) using React Native
|
|
704
|
+
**Built with ❤️ by [@divineniiquaye](https://github.com/divineniiquaye) using React Native with [@gorhom/bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet) and [@lodev09/react-native-true-sheet](https://github.com/lodev09/react-native-true-sheet).**
|
|
489
705
|
|
|
490
706
|
[⬆ Back to Top](#bottom-sheet-router--manager)
|
|
491
707
|
|
package/lib/commonjs/index.js
CHANGED
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
var _exportNames = {
|
|
7
7
|
BottomSheet: true,
|
|
8
|
+
TrueSheet: true,
|
|
8
9
|
SheetManager: true,
|
|
9
10
|
PrivateManager: true,
|
|
10
11
|
SheetProvider: true,
|
|
@@ -17,7 +18,7 @@ var _exportNames = {
|
|
|
17
18
|
Object.defineProperty(exports, "BottomSheet", {
|
|
18
19
|
enumerable: true,
|
|
19
20
|
get: function () {
|
|
20
|
-
return
|
|
21
|
+
return _gorhom.default;
|
|
21
22
|
}
|
|
22
23
|
});
|
|
23
24
|
Object.defineProperty(exports, "PrivateManager", {
|
|
@@ -38,6 +39,12 @@ Object.defineProperty(exports, "SheetProvider", {
|
|
|
38
39
|
return _provider.SheetProvider;
|
|
39
40
|
}
|
|
40
41
|
});
|
|
42
|
+
Object.defineProperty(exports, "TrueSheet", {
|
|
43
|
+
enumerable: true,
|
|
44
|
+
get: function () {
|
|
45
|
+
return _truesheet.default;
|
|
46
|
+
}
|
|
47
|
+
});
|
|
41
48
|
Object.defineProperty(exports, "registerSheet", {
|
|
42
49
|
enumerable: true,
|
|
43
50
|
get: function () {
|
|
@@ -68,7 +75,8 @@ Object.defineProperty(exports, "useSheetStackBehavior", {
|
|
|
68
75
|
return _provider.useStackBehaviorContext;
|
|
69
76
|
}
|
|
70
77
|
});
|
|
71
|
-
var
|
|
78
|
+
var _gorhom = _interopRequireDefault(require("./sheets/gorhom"));
|
|
79
|
+
var _truesheet = _interopRequireDefault(require("./sheets/truesheet"));
|
|
72
80
|
var _manager = require("./manager");
|
|
73
81
|
var _router = require("./router");
|
|
74
82
|
Object.keys(_router).forEach(function (key) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["_gorhom","_interopRequireDefault","require","_truesheet","_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,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAAAI,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,GAAAhB,OAAA;AAAAI,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,GAAAjB,OAAA;AAOoB,SAAAD,uBAAAmB,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}
|
|
@@ -8,7 +8,7 @@ var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
|
|
|
8
8
|
var _native = require("@react-navigation/native");
|
|
9
9
|
var React = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _router = require("./router");
|
|
11
|
-
var
|
|
11
|
+
var _gorhom = _interopRequireDefault(require("../sheets/gorhom"));
|
|
12
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
13
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
14
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
@@ -51,7 +51,7 @@ function BottomSheetScreen({
|
|
|
51
51
|
navigation.dispatch(_router.BottomSheetActions.snapTo(newIndex));
|
|
52
52
|
}
|
|
53
53
|
}, [navigation]);
|
|
54
|
-
return /*#__PURE__*/React.createElement(
|
|
54
|
+
return /*#__PURE__*/React.createElement(_gorhom.default, _extends({
|
|
55
55
|
ref: ref,
|
|
56
56
|
onChange: handleChange
|
|
57
57
|
}, props), children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNativeSafeAreaContext","require","_native","React","_interopRequireWildcard","_router","
|
|
1
|
+
{"version":3,"names":["_reactNativeSafeAreaContext","require","_native","React","_interopRequireWildcard","_router","_gorhom","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","BottomSheetScreen","children","navigation","route","props","ref","useRef","lastSnapIndexRef","snapToIndex","index","useEffect","closing","current","close","snapToKey","handleChange","useCallback","newIndex","position","type","emit","target","key","data","currentIndex","dispatch","BottomSheetActions","snapTo","createElement","onChange","BottomSheetView","state","descriptors","colors","useTheme","bottom","left","right","useSafeAreaInsets","themeBackgroundStyle","useMemo","borderCurve","backgroundColor","card","themeHandleIndicatorStyle","border","defaultStyle","paddingBottom","paddingLeft","paddingRight","baseRoute","sheetRoutes","routes","baseDescriptor","Fragment","render","map","descriptor","options","style","backgroundStyle","handleIndicatorStyle","handleStyle","id","borderRadius","onClose","remove","source","onBeforeShow","onAnimate","fromIndex","toIndex","fromPosition","toPosition"],"sourceRoot":"../../../src","sources":["router/view.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,44 +5,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _bottomSheet = _interopRequireWildcard(require("@gorhom/bottom-sheet"));
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
9
|
var _reactNative = require("react-native");
|
|
9
10
|
var _reactNativeReanimated = require("react-native-reanimated");
|
|
10
11
|
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
|
|
11
|
-
var
|
|
12
|
-
var _provider = require("
|
|
13
|
-
var
|
|
14
|
-
var _events = require("./events");
|
|
12
|
+
var _manager = require("../manager");
|
|
13
|
+
var _provider = require("../provider");
|
|
14
|
+
var _shared = require("./shared");
|
|
15
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
16
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
17
17
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
18
18
|
const FULL_SCREEN_POINTS = _reactNative.Platform.OS === "ios" ? ["%90", "90%"] : ["%93", "93%"];
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
onBeforeShow,
|
|
23
|
-
onContextUpdate
|
|
24
|
-
}) => {
|
|
25
|
-
const currentContext = (0, _provider.useProviderContext)();
|
|
26
|
-
const hasShownRef = _react.default.useRef(false);
|
|
27
|
-
_react.default.useEffect(() => {
|
|
28
|
-
if (!id) return undefined;
|
|
29
|
-
const subscriptions = [_events.eventManager.subscribe(`show_${id}`, (data, context, behavior) => {
|
|
30
|
-
if (currentContext !== context) return;
|
|
31
|
-
if (!hasShownRef.current) {
|
|
32
|
-
hasShownRef.current = true;
|
|
33
|
-
onContextUpdate?.();
|
|
34
|
-
onBeforeShow?.(data, behavior);
|
|
35
|
-
}
|
|
36
|
-
}), _events.eventManager.subscribe(`hide_${id}`, (data, context, dismiss, behavior) => {
|
|
37
|
-
if (currentContext !== context) return;
|
|
38
|
-
hasShownRef.current = false;
|
|
39
|
-
onHide?.(data, dismiss, behavior);
|
|
40
|
-
})];
|
|
41
|
-
return () => {
|
|
42
|
-
hasShownRef.current = false;
|
|
43
|
-
subscriptions.forEach(s => s?.unsubscribe?.());
|
|
44
|
-
};
|
|
45
|
-
}, [id, onHide, onBeforeShow, onContextUpdate, currentContext]);
|
|
19
|
+
const DEFAULT_SHEET_CLOSE_ANIMATION = {
|
|
20
|
+
duration: 300,
|
|
21
|
+
easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
|
|
46
22
|
};
|
|
47
23
|
const BottomSheetComponent = /*#__PURE__*/_react.default.forwardRef(({
|
|
48
24
|
children,
|
|
@@ -58,6 +34,7 @@ const BottomSheetComponent = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
58
34
|
style,
|
|
59
35
|
passThrough,
|
|
60
36
|
opacity,
|
|
37
|
+
closeAnimationConfigs,
|
|
61
38
|
...props
|
|
62
39
|
}, ref) => {
|
|
63
40
|
const currentSheetRef = (0, _provider.useSheetRef)();
|
|
@@ -67,15 +44,12 @@ const BottomSheetComponent = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
67
44
|
const [currentStackBehavior, setCurrentStackBehavior] = _react.default.useState(stackBehavior);
|
|
68
45
|
const isPushed = currentStackBehavior === "push";
|
|
69
46
|
const {
|
|
70
|
-
bottom
|
|
71
|
-
left,
|
|
72
|
-
right
|
|
47
|
+
bottom
|
|
73
48
|
} = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
|
|
74
49
|
const defaultStyle = _react.default.useMemo(() => ({
|
|
75
|
-
paddingBottom: bottom
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}), [bottom, left, right]);
|
|
50
|
+
paddingBottom: bottom
|
|
51
|
+
}), [bottom]);
|
|
52
|
+
const effectiveCloseAnimation = _react.default.useMemo(() => closeAnimationConfigs ?? DEFAULT_SHEET_CLOSE_ANIMATION, [closeAnimationConfigs]);
|
|
79
53
|
const {
|
|
80
54
|
fullScreenValues
|
|
81
55
|
} = (0, _provider.useSheetSharedContext)();
|
|
@@ -91,10 +65,11 @@ const BottomSheetComponent = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
91
65
|
const bottomSheetRef = _react.default.useRef(null);
|
|
92
66
|
const hardwareBackPressEvent = _react.default.useRef(null);
|
|
93
67
|
const teardownDataRef = _react.default.useRef({});
|
|
68
|
+
const isClosingRef = _react.default.useRef(false);
|
|
94
69
|
const id = (0, _provider.useSheetIDContext)();
|
|
95
70
|
const sheetId = props.id || id;
|
|
96
71
|
const hideSheetRef = _react.default.useRef(null);
|
|
97
|
-
useSheetManager({
|
|
72
|
+
(0, _shared.useSheetManager)({
|
|
98
73
|
id: sheetId,
|
|
99
74
|
onHide: (data, dismiss, behavior) => {
|
|
100
75
|
// Update state for future renders, but also pass behavior directly
|
|
@@ -130,7 +105,7 @@ const BottomSheetComponent = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
130
105
|
...fullScreenValues.value
|
|
131
106
|
};
|
|
132
107
|
current[sheetId] = val;
|
|
133
|
-
fullScreenValues.
|
|
108
|
+
fullScreenValues.set(current);
|
|
134
109
|
}
|
|
135
110
|
}, [iosModalSheetTypeOfAnimation, sheetId]);
|
|
136
111
|
_react.default.useEffect(() => {
|
|
@@ -140,35 +115,14 @@ const BottomSheetComponent = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
140
115
|
...fullScreenValues.value
|
|
141
116
|
};
|
|
142
117
|
delete current[sheetId];
|
|
143
|
-
fullScreenValues.
|
|
118
|
+
fullScreenValues.set(current);
|
|
144
119
|
}
|
|
145
120
|
};
|
|
146
121
|
}, [iosModalSheetTypeOfAnimation, sheetId, fullScreenValues]);
|
|
147
|
-
const teardownSheet =
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
_events.eventManager.publish(`onclose_${sheetId}`, value, currentCtx, hasHistory || !!dismiss, behavior);
|
|
152
|
-
if (shouldRestorePrevious) {
|
|
153
|
-
if (dismiss) {
|
|
154
|
-
// it will surface naturally when the push sheet is closed.
|
|
155
|
-
if (behavior !== "push") {
|
|
156
|
-
_manager.PrivateManager.history.push({
|
|
157
|
-
id: sheetId,
|
|
158
|
-
context: currentCtx,
|
|
159
|
-
behavior: behavior
|
|
160
|
-
});
|
|
161
|
-
}
|
|
162
|
-
} else if (hasHistory) {
|
|
163
|
-
const otherSheetsStillOpen = _manager.PrivateManager.stack().some(s => !(s.id === sheetId && s.context === currentCtx));
|
|
164
|
-
if (!otherSheetsStillOpen) {
|
|
165
|
-
const prev = _manager.PrivateManager.history.pop();
|
|
166
|
-
_events.eventManager.publish(`show_wrap_${prev.id}`, undefined, prev.context, true, prev.behavior);
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
_manager.PrivateManager.remove(sheetId, currentCtx);
|
|
171
|
-
}, [sheetId, currentCtx]);
|
|
122
|
+
const teardownSheet = (0, _shared.useTeardownSheet)({
|
|
123
|
+
sheetId,
|
|
124
|
+
currentCtx
|
|
125
|
+
});
|
|
172
126
|
const hideSheet = _react.default.useCallback((data, fromManager, dismiss, incomingBehavior) => {
|
|
173
127
|
// Use the freshly-delivered behavior from the event when available.
|
|
174
128
|
// currentStackBehavior comes from React state which may not have flushed
|
|
@@ -184,12 +138,14 @@ const BottomSheetComponent = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
184
138
|
}
|
|
185
139
|
const shouldClose = activeBehavior !== "replace" || !dismiss;
|
|
186
140
|
if (fromManager && shouldClose) {
|
|
141
|
+
if (isClosingRef.current) return;
|
|
142
|
+
isClosingRef.current = true;
|
|
187
143
|
valueRef.current = value;
|
|
188
144
|
teardownDataRef.current = {
|
|
189
145
|
dismiss,
|
|
190
146
|
behavior: activeBehavior
|
|
191
147
|
};
|
|
192
|
-
bottomSheetRef.current?.close();
|
|
148
|
+
bottomSheetRef.current?.close(effectiveCloseAnimation);
|
|
193
149
|
return;
|
|
194
150
|
}
|
|
195
151
|
const finalDismiss = fromManager ? dismiss : teardownDataRef.current.dismiss;
|
|
@@ -197,19 +153,18 @@ const BottomSheetComponent = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
197
153
|
teardownDataRef.current = {};
|
|
198
154
|
const closeValue = onClose?.(value);
|
|
199
155
|
if (closeValue !== undefined) value = closeValue;
|
|
200
|
-
if (shouldClose) {
|
|
201
|
-
bottomSheetRef.current?.close();
|
|
202
|
-
}
|
|
203
156
|
teardownSheet(value, finalDismiss, finalBehavior);
|
|
157
|
+
isClosingRef.current = false;
|
|
204
158
|
if (fromManager) valueRef.current = data;
|
|
205
|
-
}, [currentStackBehavior, onClose, teardownSheet]);
|
|
159
|
+
}, [currentStackBehavior, effectiveCloseAnimation, onClose, teardownSheet]);
|
|
206
160
|
_react.default.useEffect(() => {
|
|
207
161
|
hideSheetRef.current = hideSheet;
|
|
208
162
|
}, [hideSheet]);
|
|
209
163
|
const getInstance = _react.default.useCallback(() => ({
|
|
210
164
|
close(options = {}) {
|
|
211
165
|
valueRef.current = options.value;
|
|
212
|
-
|
|
166
|
+
const opts = options;
|
|
167
|
+
bottomSheetRef.current?.close(opts.animationConfigs ?? effectiveCloseAnimation);
|
|
213
168
|
},
|
|
214
169
|
expand(animationConfigs) {
|
|
215
170
|
bottomSheetRef.current?.expand(animationConfigs);
|
|
@@ -223,7 +178,7 @@ const BottomSheetComponent = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
223
178
|
snapToPosition(position, animationConfigs) {
|
|
224
179
|
bottomSheetRef.current?.snapToPosition(position, animationConfigs);
|
|
225
180
|
}
|
|
226
|
-
}), []);
|
|
181
|
+
}), [effectiveCloseAnimation]);
|
|
227
182
|
_react.default.useEffect(() => {
|
|
228
183
|
if (sheetId) {
|
|
229
184
|
_manager.PrivateManager.registerRef(sheetId, currentCtx, {
|
|
@@ -288,4 +243,4 @@ BottomSheet.FooterContainer = _bottomSheet.BottomSheetFooterContainer;
|
|
|
288
243
|
BottomSheet.Backdrop = _bottomSheet.BottomSheetBackdrop;
|
|
289
244
|
BottomSheet.TextInput = _bottomSheet.BottomSheetTextInput;
|
|
290
245
|
var _default = exports.default = BottomSheet;
|
|
291
|
-
//# sourceMappingURL=
|
|
246
|
+
//# sourceMappingURL=gorhom.js.map
|