@swmansion/react-native-bottom-sheet 0.12.0 → 0.13.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 +12 -9
- package/android/src/main/java/com/swmansion/reactnativebottomsheet/BottomSheetView.kt +4 -1
- package/ios/BottomSheetHostingView.swift +6 -3
- package/lib/module/BottomSheet.js.map +1 -1
- package/lib/typescript/src/BottomSheet.d.ts +6 -1
- package/lib/typescript/src/BottomSheet.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/BottomSheet.tsx +6 -1
package/README.md
CHANGED
|
@@ -84,8 +84,8 @@ relative to the provider.
|
|
|
84
84
|
The library provides two components: `BottomSheet` (inline) and
|
|
85
85
|
`ModalBottomSheet` (modal). Both render their children as the sheet content,
|
|
86
86
|
with a `surface` prop for the background behind it, and are controlled via
|
|
87
|
-
`detents`, `index`, and `onIndexChange`. Use `onSettle`
|
|
88
|
-
|
|
87
|
+
`detents`, `index`, and `onIndexChange`. Use `onSettle` to observe when the
|
|
88
|
+
sheet finishes moving.
|
|
89
89
|
|
|
90
90
|
### Inline
|
|
91
91
|
|
|
@@ -248,12 +248,15 @@ content, never on the surface:
|
|
|
248
248
|
The `index` prop is a zero‍-‍based index into the `detents` array.
|
|
249
249
|
`onIndexChange` and `onSettle` have different responsibilities:
|
|
250
250
|
|
|
251
|
-
- `onIndexChange`
|
|
252
|
-
to
|
|
251
|
+
- `onIndexChange` fires when a user‍-‍triggered snap is _initiated_: the
|
|
252
|
+
moment a drag commits to a detent, before the animation settles. It does not
|
|
253
|
+
fire for programmatic `index` changes; you already know when you make those.
|
|
254
|
+
Treat it as the signal to update your controlled `index` state.
|
|
253
255
|
- `onSettle` fires when the sheet finishes snapping to a detent, regardless of
|
|
254
|
-
whether that snap was user‍-‍triggered or programmatic.
|
|
255
|
-
|
|
256
|
-
updating the controlled
|
|
256
|
+
whether that snap was user‍-‍triggered or programmatic. It is the
|
|
257
|
+
signal for the _end_ of any movement. Use it for observability or side effects
|
|
258
|
+
(analytics, reacting to collapse, etc.), not for updating the controlled
|
|
259
|
+
`index` state.
|
|
257
260
|
|
|
258
261
|
```tsx
|
|
259
262
|
const [index, setIndex] = useState(0);
|
|
@@ -263,10 +266,10 @@ const [index, setIndex] = useState(0);
|
|
|
263
266
|
<BottomSheet // Or `ModalBottomSheet`.
|
|
264
267
|
detents={[0, 300, 'content']} // Collapsed, 300 px, content height.
|
|
265
268
|
index={index}
|
|
266
|
-
onIndexChange={setIndex} //
|
|
269
|
+
onIndexChange={setIndex} // Fires when a drag commits; keep state in sync.
|
|
267
270
|
surface={/* ... */}
|
|
268
271
|
onSettle={(nextIndex) => {
|
|
269
|
-
if (nextIndex === 0) console.log('Sheet
|
|
272
|
+
if (nextIndex === 0) console.log('Sheet finished collapsing.');
|
|
270
273
|
}}
|
|
271
274
|
>
|
|
272
275
|
{/* ... */}
|
|
@@ -574,13 +574,16 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
|
|
|
574
574
|
}
|
|
575
575
|
emitPosition()
|
|
576
576
|
updateInteractionState()
|
|
577
|
-
if (emitIndexChange) listener?.onIndexChange(index)
|
|
578
577
|
if (emitSettle) listener?.onSettle(index)
|
|
579
578
|
}
|
|
580
579
|
}
|
|
581
580
|
|
|
582
581
|
activeAnimation = spring
|
|
583
582
|
startChoreographer()
|
|
583
|
+
// Report the index change as soon as the snap is committed, not when it
|
|
584
|
+
// finishes: targetIndex is already set, and a programmatic snap's start is
|
|
585
|
+
// known to the caller. onSettle remains the signal for movement end.
|
|
586
|
+
if (emitIndexChange) listener?.onIndexChange(index)
|
|
584
587
|
spring.start()
|
|
585
588
|
}
|
|
586
589
|
|
|
@@ -438,13 +438,16 @@ public final class BottomSheetHostingView: UIView {
|
|
|
438
438
|
self.scrimPinnedFull = false
|
|
439
439
|
self.setContentInteractionEnabled(true)
|
|
440
440
|
self.updateInteractionState()
|
|
441
|
-
if emitIndexChange {
|
|
442
|
-
self.eventDelegate?.bottomSheetHostingView(self, didChangeIndex: index)
|
|
443
|
-
}
|
|
444
441
|
if emitSettle {
|
|
445
442
|
self.eventDelegate?.bottomSheetHostingView(self, didSettle: index)
|
|
446
443
|
}
|
|
447
444
|
}
|
|
445
|
+
// Report the index change as soon as the snap is committed, not when it
|
|
446
|
+
// finishes: `targetIndex` is already set, and a programmatic snap's start is
|
|
447
|
+
// known to the caller. `onSettle` remains the signal for movement end.
|
|
448
|
+
if emitIndexChange {
|
|
449
|
+
eventDelegate?.bottomSheetHostingView(self, didChangeIndex: index)
|
|
450
|
+
}
|
|
448
451
|
animator.startAnimation()
|
|
449
452
|
activeAnimator = animator
|
|
450
453
|
startDisplayLink()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","View","useWindowDimensions","useSafeAreaInsets","BottomSheetNativeComponent","BottomSheetSurfaceNativeComponent","Portal","jsx","_jsx","jsxs","_jsxs","programmatic","BottomSheet","children","surface","style","detents","index","animateIn","onIndexChange","onSettle","onPositionChange","modal","disableScrollableNegotiation","scrimColor","scrimOpacities","height","windowHeight","insets","maxHeight","top","nativeDetents","map","detent","isDetentProgrammatic","value","resolveDetentValue","kind","Math","max","min","clampedIndex","length","selectedDetentValue","isCollapsed","resolvedScrimOpacity","handleIndexChange","event","nativeEvent","handleSettle","handlePositionChange","position","sheet","absoluteFill","pointerEvents","left","right","bottom","maxDetentHeight","collapsable","flex"],"sourceRoot":"../../src","sources":["BottomSheet.tsx"],"mappings":";;AAEA,SAASA,UAAU,EAAEC,IAAI,EAAEC,mBAAmB,QAAQ,cAAc;AACpE,SAASC,iBAAiB,QAAQ,gCAAgC;AAElE,OAAOC,0BAA0B,MAAM,8BAA8B;AACrE,OAAOC,iCAAiC,MAAM,qCAAqC;AACnF,SAASC,MAAM,QAAQ,0BAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C,SAASC,YAAY,QAAQ,uBAAoB;;AAEjD;AACA;AACA;;
|
|
1
|
+
{"version":3,"names":["StyleSheet","View","useWindowDimensions","useSafeAreaInsets","BottomSheetNativeComponent","BottomSheetSurfaceNativeComponent","Portal","jsx","_jsx","jsxs","_jsxs","programmatic","BottomSheet","children","surface","style","detents","index","animateIn","onIndexChange","onSettle","onPositionChange","modal","disableScrollableNegotiation","scrimColor","scrimOpacities","height","windowHeight","insets","maxHeight","top","nativeDetents","map","detent","isDetentProgrammatic","value","resolveDetentValue","kind","Math","max","min","clampedIndex","length","selectedDetentValue","isCollapsed","resolvedScrimOpacity","handleIndexChange","event","nativeEvent","handleSettle","handlePositionChange","position","sheet","absoluteFill","pointerEvents","left","right","bottom","maxDetentHeight","collapsable","flex"],"sourceRoot":"../../src","sources":["BottomSheet.tsx"],"mappings":";;AAEA,SAASA,UAAU,EAAEC,IAAI,EAAEC,mBAAmB,QAAQ,cAAc;AACpE,SAASC,iBAAiB,QAAQ,gCAAgC;AAElE,OAAOC,0BAA0B,MAAM,8BAA8B;AACrE,OAAOC,iCAAiC,MAAM,qCAAqC;AACnF,SAASC,MAAM,QAAQ,0BAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C,SAASC,YAAY,QAAQ,uBAAoB;;AAEjD;AACA;AACA;;AA6DA;AACA,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAC1BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,OAAO,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC;EACxBC,KAAK;EACLC,SAAS,GAAG,IAAI;EAChBC,aAAa;EACbC,QAAQ;EACRC,gBAAgB;EAChBC,KAAK,GAAG,KAAK;EACbC,4BAA4B,GAAG,KAAK;EACpCC,UAAU;EACVC;AACgB,CAAC,KAAK;EACtB,MAAM;IAAEC,MAAM,EAAEC;EAAa,CAAC,GAAGzB,mBAAmB,CAAC,CAAC;EACtD,MAAM0B,MAAM,GAAGzB,iBAAiB,CAAC,CAAC;EAClC,MAAM0B,SAAS,GAAGF,YAAY,GAAGC,MAAM,CAACE,GAAG;EAC3C,MAAMC,aAAa,GAAGf,OAAO,CAACgB,GAAG,CAAEC,MAAM,IAAK;IAC5C,MAAMtB,YAAY,GAAGuB,oBAAoB,CAACD,MAAM,CAAC;IACjD,MAAME,KAAK,GAAGC,kBAAkB,CAACH,MAAM,CAAC;IAExC,IAAIE,KAAK,KAAK,SAAS,EAAE;MACvB,OAAO;QACLA,KAAK,EAAE,CAAC;QACRE,IAAI,EAAE,SAAS;QACf1B;MACF,CAAC;IACH;IAEA,OAAO;MACLwB,KAAK,EAAEG,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,GAAG,CAACL,KAAK,EAAEN,SAAS,CAAC,CAAC;MAC9CQ,IAAI,EAAE,QAAQ;MACd1B;IACF,CAAC;EACH,CAAC,CAAC;EAEF,MAAM8B,YAAY,GAAGH,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,GAAG,CAACvB,KAAK,EAAEc,aAAa,CAACW,MAAM,GAAG,CAAC,CAAC,CAAC;EAC3E,MAAMC,mBAAmB,GAAG3B,OAAO,CAACyB,YAAY,CAAC,GAC7CL,kBAAkB,CAACpB,OAAO,CAACyB,YAAY,CAAC,CAAC,GACzC,CAAC;EACL,MAAMG,WAAW,GAAGD,mBAAmB,KAAK,CAAC;EAC7C;EACA;EACA;EACA,MAAME,oBAAoB,GACxBpB,cAAc,IACdT,OAAO,CAACgB,GAAG,CAAEC,MAAM,IAAMG,kBAAkB,CAACH,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAE,CAAC;EACrE,MAAMa,iBAAiB,GAAIC,KAAyC,IAAK;IACvE5B,aAAa,GAAG4B,KAAK,CAACC,WAAW,CAAC/B,KAAK,CAAC;EAC1C,CAAC;EACD,MAAMgC,YAAY,GAAIF,KAAyC,IAAK;IAClE3B,QAAQ,GAAG2B,KAAK,CAACC,WAAW,CAAC/B,KAAK,CAAC;EACrC,CAAC;EAED,MAAMiC,oBAAoB,GAAIH,KAE7B,IAAK;IACJ,MAAMrB,MAAM,GAAGqB,KAAK,CAACC,WAAW,CAACG,QAAQ;IACzC9B,gBAAgB,GAAGK,MAAM,CAAC;EAC5B,CAAC;EAED,MAAM0B,KAAK,gBACT5C,IAAA,CAACP,IAAI;IACHc,KAAK,EAAEf,UAAU,CAACqD,YAAa;IAC/BC,aAAa,EAAEhC,KAAK,GAAIsB,WAAW,GAAG,MAAM,GAAG,MAAM,GAAI,UAAW;IAAA/B,QAAA,eAEpEL,IAAA,CAACP,IAAI;MAACqD,aAAa,EAAC,UAAU;MAACvC,KAAK,EAAEf,UAAU,CAACqD,YAAa;MAAAxC,QAAA,eAC5DH,KAAA,CAACN,0BAA0B;QACzBkD,aAAa,EAAC,UAAU;QACxBvC,KAAK,EAAE,CACL;UACEoC,QAAQ,EAAE,UAAU;UACpBI,IAAI,EAAE,CAAC;UACPC,KAAK,EAAE,CAAC;UACRC,MAAM,EAAE,CAAC;UACT;UACA;UACA;UACA/B,MAAM,EAAEC;QACV,CAAC,EACDZ,KAAK,CACL;QACFC,OAAO,EAAEe,aAAc;QACvB2B,eAAe,EAAE7B,SAAU;QAC3BZ,KAAK,EAAEA,KAAM;QACbC,SAAS,EAAEA,SAAU;QACrBI,KAAK,EAAEA,KAAM;QACbC,4BAA4B,EAAEA,4BAA6B;QAC3DC,UAAU,EAAEA,UAAW;QACvBC,cAAc,EAAEoB,oBAAqB;QACrC1B,aAAa,EAAE2B,iBAAkB;QACjC1B,QAAQ,EAAE6B,YAAa;QACvB5B,gBAAgB,EAAE6B,oBAAqB;QAAArC,QAAA,GAEtCC,OAAO,IAAI,IAAI,iBACdN,IAAA,CAACH,iCAAiC;UAChCsD,WAAW,EAAE,KAAM;UACnBL,aAAa,EAAC,UAAU;UACxBvC,KAAK,EAAEf,UAAU,CAACqD,YAAa;UAAAxC,QAAA,EAE9BC;QAAO,CACyB,CACpC,eACDJ,KAAA,CAACT,IAAI;UAAC0D,WAAW,EAAE,KAAM;UAAC5C,KAAK,EAAE;YAAE6C,IAAI,EAAE,CAAC;YAAE/B;UAAU,CAAE;UAAAhB,QAAA,GACrDA,QAAQ,eACTL,IAAA,CAACP,IAAI;YAAC0D,WAAW,EAAE,KAAM;YAACL,aAAa,EAAC;UAAM,CAAE,CAAC;QAAA,CAC7C,CAAC;MAAA,CACmB;IAAC,CACzB;EAAC,CACH,CACP;EAED,IAAIhC,KAAK,EAAE;IACT,oBAAOd,IAAA,CAACF,MAAM;MAAAO,QAAA,EAAEuC;IAAK,CAAS,CAAC;EACjC;EAEA,OAAOA,KAAK;AACd,CAAC;AAED,SAASlB,oBAAoBA,CAACD,MAAc,EAAW;EACrD,IAAI,OAAOA,MAAM,KAAK,QAAQ,IAAIA,MAAM,KAAK,IAAI,EAAE;IACjD,OAAOA,MAAM,CAACtB,YAAY,KAAK,IAAI;EACrC;EACA,OAAO,KAAK;AACd;AAEA,SAASyB,kBAAkBA,CAACH,MAAc,EAAE;EAC1C,IAAI,OAAOA,MAAM,KAAK,QAAQ,IAAIA,MAAM,KAAK,IAAI,EAAE;IACjD,OAAOA,MAAM,CAACE,KAAK;EACrB;EACA,OAAOF,MAAM;AACf","ignoreList":[]}
|
|
@@ -29,7 +29,12 @@ export interface BottomSheetProps {
|
|
|
29
29
|
index: number;
|
|
30
30
|
/** Whether the sheet should animate in on first layout. */
|
|
31
31
|
animateIn?: boolean;
|
|
32
|
-
/**
|
|
32
|
+
/**
|
|
33
|
+
* Called when a user-driven snap is initiated: the moment a drag commits to a
|
|
34
|
+
* detent, before the animation settles. Does not fire for programmatic `index`
|
|
35
|
+
* changes; you already know when you make those. Use it to keep your controlled
|
|
36
|
+
* `index` state in sync. For the end of any movement, use `onSettle`.
|
|
37
|
+
*/
|
|
33
38
|
onIndexChange?: (index: number) => void;
|
|
34
39
|
/** Called when a snap animation settles, including programmatic changes. */
|
|
35
40
|
onSettle?: (index: number) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB
|
|
1
|
+
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;;;OAYG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,GAAI,sKAczB,gBAAgB,4CAwGlB,CAAC"}
|
package/package.json
CHANGED
package/src/BottomSheet.tsx
CHANGED
|
@@ -36,7 +36,12 @@ export interface BottomSheetProps {
|
|
|
36
36
|
index: number;
|
|
37
37
|
/** Whether the sheet should animate in on first layout. */
|
|
38
38
|
animateIn?: boolean;
|
|
39
|
-
/**
|
|
39
|
+
/**
|
|
40
|
+
* Called when a user-driven snap is initiated: the moment a drag commits to a
|
|
41
|
+
* detent, before the animation settles. Does not fire for programmatic `index`
|
|
42
|
+
* changes; you already know when you make those. Use it to keep your controlled
|
|
43
|
+
* `index` state in sync. For the end of any movement, use `onSettle`.
|
|
44
|
+
*/
|
|
40
45
|
onIndexChange?: (index: number) => void;
|
|
41
46
|
/** Called when a snap animation settles, including programmatic changes. */
|
|
42
47
|
onSettle?: (index: number) => void;
|