@swmansion/react-native-bottom-sheet 0.8.1-next.1 → 0.8.1
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 +21 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -42,7 +42,8 @@ React Native.
|
|
|
42
42
|
The library provides two components: `BottomSheet` (inline) and
|
|
43
43
|
`ModalBottomSheet` (modal). Both render their children as the sheet content
|
|
44
44
|
(including any background) and are controlled via `detents`, `index`,
|
|
45
|
-
and `onIndexChange`.
|
|
45
|
+
and `onIndexChange`. Use `onSettle` for
|
|
46
|
+
post‍-‍snap observability.
|
|
46
47
|
|
|
47
48
|
### Inline
|
|
48
49
|
|
|
@@ -108,13 +109,18 @@ its color:
|
|
|
108
109
|
### Detents and index
|
|
109
110
|
|
|
110
111
|
Detents are the points to which the sheet snaps. Each detent is either a number
|
|
111
|
-
(a fixed height in pixels) or `'
|
|
112
|
-
available screen height). The default detents are `[0, '
|
|
112
|
+
(a fixed height in pixels) or `'content'` (the sheet’s content height, capped by
|
|
113
|
+
the available screen height). The default detents are `[0, 'content']`.
|
|
113
114
|
|
|
114
115
|
The `index` prop is a zero‍-‍based index into the `detents` array.
|
|
115
|
-
`onIndexChange`
|
|
116
|
-
|
|
117
|
-
|
|
116
|
+
`onIndexChange` and `onSettle` have different responsibilities:
|
|
117
|
+
|
|
118
|
+
- `onIndexChange` is for user‍-‍triggered snaps. Treat it as the signal
|
|
119
|
+
to update your controlled `index` state.
|
|
120
|
+
- `onSettle` fires when the sheet finishes snapping to a detent, regardless of
|
|
121
|
+
whether that snap was user‍-‍triggered or programmatic. Use it for
|
|
122
|
+
observability or side effects (analytics, reacting to collapse, etc.), not for
|
|
123
|
+
updating the controlled `index` state.
|
|
118
124
|
|
|
119
125
|
```tsx
|
|
120
126
|
const [index, setIndex] = useState(0);
|
|
@@ -122,9 +128,12 @@ const [index, setIndex] = useState(0);
|
|
|
122
128
|
|
|
123
129
|
```tsx
|
|
124
130
|
<BottomSheet // Or `ModalBottomSheet`.
|
|
125
|
-
detents={[0, 300, '
|
|
131
|
+
detents={[0, 300, 'content']} // Collapsed, 300 px, content height.
|
|
126
132
|
index={index}
|
|
127
|
-
onIndexChange={setIndex}
|
|
133
|
+
onIndexChange={setIndex} // Keep controlled state in sync.
|
|
134
|
+
onSettle={(nextIndex) => {
|
|
135
|
+
if (nextIndex === 0) console.log('Sheet collapsed.');
|
|
136
|
+
}}
|
|
128
137
|
>
|
|
129
138
|
{/* ... */}
|
|
130
139
|
</BottomSheet>
|
|
@@ -138,9 +147,12 @@ drag snapping but can still be targeted via `index` updates.
|
|
|
138
147
|
|
|
139
148
|
```tsx
|
|
140
149
|
<BottomSheet
|
|
141
|
-
detents={[0, programmatic(300), '
|
|
150
|
+
detents={[0, programmatic(300), 'content']}
|
|
142
151
|
index={index}
|
|
143
152
|
onIndexChange={setIndex}
|
|
153
|
+
onSettle={(nextIndex) => {
|
|
154
|
+
console.log(`Settled at ${nextIndex}.`);
|
|
155
|
+
}}
|
|
144
156
|
>
|
|
145
157
|
{/* ... */}
|
|
146
158
|
</BottomSheet>
|
package/package.json
CHANGED