@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.
- package/README.md +204 -193
- package/lib/commonjs/index.js +9 -2
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/manager.js +56 -16
- package/lib/commonjs/manager.js.map +1 -1
- package/lib/commonjs/provider.js +41 -44
- package/lib/commonjs/provider.js.map +1 -1
- package/lib/commonjs/router/index.js +37 -7
- package/lib/commonjs/router/index.js.map +1 -1
- package/lib/commonjs/router/router.js.map +1 -1
- package/lib/commonjs/router/view.js +77 -220
- package/lib/commonjs/router/view.js.map +1 -1
- package/lib/commonjs/sheet.js +61 -85
- package/lib/commonjs/sheet.js.map +1 -1
- package/lib/module/index.js +2 -2
- package/lib/module/index.js.map +1 -1
- package/lib/module/manager.js +56 -16
- package/lib/module/manager.js.map +1 -1
- package/lib/module/provider.js +39 -42
- package/lib/module/provider.js.map +1 -1
- package/lib/module/router/index.js +39 -8
- package/lib/module/router/index.js.map +1 -1
- package/lib/module/router/router.js.map +1 -1
- package/lib/module/router/view.js +76 -220
- package/lib/module/router/view.js.map +1 -1
- package/lib/module/sheet.js +63 -87
- package/lib/module/sheet.js.map +1 -1
- package/lib/typescript/index.d.ts +2 -2
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/manager.d.ts +16 -0
- package/lib/typescript/manager.d.ts.map +1 -1
- package/lib/typescript/provider.d.ts +10 -23
- package/lib/typescript/provider.d.ts.map +1 -1
- package/lib/typescript/router/index.d.ts +21 -7
- package/lib/typescript/router/index.d.ts.map +1 -1
- package/lib/typescript/router/router.d.ts.map +1 -1
- package/lib/typescript/router/types.d.ts +75 -61
- package/lib/typescript/router/types.d.ts.map +1 -1
- package/lib/typescript/router/view.d.ts +3 -3
- package/lib/typescript/router/view.d.ts.map +1 -1
- package/lib/typescript/sheet.d.ts +1 -1
- package/lib/typescript/sheet.d.ts.map +1 -1
- package/lib/typescript/types.d.ts +32 -15
- package/lib/typescript/types.d.ts.map +1 -1
- package/package.json +14 -15
- package/src/index.ts +7 -7
- package/src/manager.ts +66 -22
- package/src/provider.tsx +72 -53
- package/src/router/index.tsx +46 -9
- package/src/router/router.ts +6 -2
- package/src/router/types.ts +109 -91
- package/src/router/view.tsx +86 -308
- package/src/sheet.tsx +111 -123
- 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
|
|
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
|
|
29
|
-
import type { SheetProps } from
|
|
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
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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 {
|
|
55
|
-
import
|
|
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
|
-
|
|
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
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
60
|
+
declare module "@niibase/bottom-sheet-manager" {
|
|
61
|
+
interface Sheets {
|
|
62
|
+
"example-sheet": SheetDefinition;
|
|
63
|
+
}
|
|
65
64
|
}
|
|
66
65
|
```
|
|
67
66
|
|
|
68
|
-
|
|
67
|
+
Import `sheets.ts` in your app entry point, then wrap your app with `SheetProvider`:
|
|
69
68
|
|
|
70
69
|
```tsx
|
|
71
|
-
import { SheetProvider } from
|
|
72
|
-
|
|
70
|
+
import { SheetProvider } from "@niibase/bottom-sheet-manager";
|
|
71
|
+
|
|
72
|
+
import "./sheets";
|
|
73
73
|
|
|
74
74
|
function App() {
|
|
75
|
-
|
|
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(
|
|
83
|
+
SheetManager.show("example-sheet");
|
|
88
84
|
|
|
89
85
|
// Show with payload
|
|
90
|
-
SheetManager.show(
|
|
86
|
+
SheetManager.show("example-sheet", { payload: { userId: 123 } });
|
|
91
87
|
|
|
92
88
|
// Hide a sheet
|
|
93
|
-
SheetManager.hide(
|
|
89
|
+
SheetManager.hide("example-sheet");
|
|
94
90
|
|
|
95
91
|
// Hide and get return value
|
|
96
|
-
const result = await SheetManager.show(
|
|
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
|
|
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
|
-
|
|
111
|
-
|
|
112
|
-
|
|
112
|
+
<BottomSheet
|
|
113
|
+
id={id}
|
|
114
|
+
stackBehavior="push" // or "switch" or "replace"
|
|
115
|
+
snapPoints={["50%", "90%"]}
|
|
113
116
|
>
|
|
114
|
-
|
|
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
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
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
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
+
BottomSheetNavigationOptions,
|
|
140
|
+
typeof Navigator,
|
|
141
|
+
BottomSheetNavigationState<any>,
|
|
142
|
+
BottomSheetNavigationEventMap
|
|
139
143
|
>(Navigator);
|
|
140
144
|
|
|
141
145
|
export const unstable_settings = {
|
|
142
|
-
|
|
146
|
+
initialRouteName: "index",
|
|
143
147
|
};
|
|
144
148
|
|
|
145
149
|
export default function Layout() {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
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
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
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
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
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
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
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
|
-
|
|
279
|
-
|
|
257
|
+
const payload = useSheetPayload<"my-sheet">();
|
|
258
|
+
// payload is typed based on your SheetDefinition
|
|
280
259
|
}
|
|
281
260
|
```
|
|
282
261
|
|
|
283
|
-
### `
|
|
262
|
+
### `useSheetStackBehavior`
|
|
284
263
|
|
|
285
264
|
Get the current stack behavior context:
|
|
286
265
|
|
|
287
266
|
```tsx
|
|
288
|
-
import {
|
|
267
|
+
import { useSheetStackBehavior } from "@niibase/bottom-sheet-manager";
|
|
289
268
|
|
|
290
269
|
function MySheet() {
|
|
291
|
-
|
|
292
|
-
|
|
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
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
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
|
-
|
|
322
|
-
|
|
323
|
-
|
|
299
|
+
id={id}
|
|
300
|
+
iosModalSheetTypeOfAnimation={true}
|
|
301
|
+
snapPoints={["50%", "90%", "100%"]}
|
|
324
302
|
>
|
|
325
|
-
|
|
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
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
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
|
-
//
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
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
|
-
|
|
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(
|
|
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
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
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
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
)
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
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
|
|
418
|
-
|
|
419
|
-
| `id`
|
|
420
|
-
| `stackBehavior`
|
|
421
|
-
| `iosModalSheetTypeOfAnimation` | `boolean`
|
|
422
|
-
| `clickThrough`
|
|
423
|
-
| `opacity`
|
|
424
|
-
| `hardwareBackPressToClose`
|
|
425
|
-
| `onClose`
|
|
426
|
-
| `onBeforeShow`
|
|
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
|
|
433
|
-
|
|
434
|
-
| `snapPoints`
|
|
435
|
-
| `clickThrough`
|
|
436
|
-
| `iosModalSheetTypeOfAnimation` | `boolean`
|
|
437
|
-
| `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
|
|
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
|
-
|
package/lib/commonjs/index.js
CHANGED
|
@@ -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
|
-
|
|
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, "
|
|
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":"
|
|
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":[]}
|