@swmansion/react-native-bottom-sheet 0.8.0 → 0.8.1

package/README.md

@@ -42,7 +42,8 @@ React Native.
 The library provides two components: `BottomSheet` (inline) and
 `ModalBottomSheet` (modal). Both render their children as the sheet content
 (including any background) and are controlled via `detents`, `index`,
-and `onIndexChange`.
+and `onIndexChange`. Use `onSettle` for
+post‍-‍snap observability.
 
 ### Inline
 
@@ -108,13 +109,18 @@ its color:
 ### Detents and index
 
 Detents are the points to which the sheet snaps. Each detent is either a number
-(a fixed height in pixels) or `'max'` (the sheet’s content height, capped by the
-available screen height). The default detents are `[0, 'max']`.
+(a fixed height in pixels) or `'content'` (the sheet’s content height, capped by
+the available screen height). The default detents are `[0, 'content']`.
 
 The `index` prop is a zero‍-‍based index into the `detents` array.
-`onIndexChange` is called when the sheet snaps to a different detent after
-a drag. You can also control the sheet externally by updating the
-index state.
+`onIndexChange` and `onSettle` have different responsibilities:
+
+- `onIndexChange` is for user‍-‍triggered snaps. Treat it as the signal
+  to update your controlled `index` state.
+- `onSettle` fires when the sheet finishes snapping to a detent, regardless of
+  whether that snap was user‍-‍triggered or programmatic. Use it for
+  observability or side effects (analytics, reacting to collapse, etc.), not for
+  updating the controlled `index` state.
 
 ```tsx
 const [index, setIndex] = useState(0);
@@ -122,9 +128,12 @@ const [index, setIndex] = useState(0);
 
 ```tsx
 <BottomSheet // Or `ModalBottomSheet`.
-  detents={[0, 300, 'max']} // Collapsed, 300 px, content height.
+  detents={[0, 300, 'content']} // Collapsed, 300 px, content height.
   index={index}
-  onIndexChange={setIndex}
+  onIndexChange={setIndex} // Keep controlled state in sync.
+  onSettle={(nextIndex) => {
+    if (nextIndex === 0) console.log('Sheet collapsed.');
+  }}
 >
   {/* ... */}
 </BottomSheet>
@@ -138,9 +147,12 @@ drag snapping but can still be targeted via `index`&nbsp;updates.
 
 ```tsx
 <BottomSheet
-  detents={[0, programmatic(300), 'max']}
+  detents={[0, programmatic(300), 'content']}
   index={index}
   onIndexChange={setIndex}
+  onSettle={(nextIndex) => {
+    console.log(`Settled at ${nextIndex}.`);
+  }}
 >
   {/* ... */}
 </BottomSheet>

package/android/src/main/java/com/swmansion/reactnativebottomsheet/BottomSheetView.kt

@@ -56,6 +56,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   private val sheetContainer = FrameLayout(context)
   private val scrimPaint = Paint(Paint.ANTI_ALIAS_FLAG)
   private var activeAnimation: SpringAnimation? = null
+  private var activeAnimationEmitsSettle = false
   private var velocityTracker: VelocityTracker? = null
   private var choreographerCallback: Choreographer.FrameCallback? = null
   private val density = context.resources.displayMetrics.density
@@ -188,13 +189,15 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
         targetIndex = targetIndex.coerceIn(0, detentSpecs.size - 1)
         if (activeAnimation != null) {
           val currentTy = sheetContainer.translationY
+          val shouldEmitSettle = activeAnimationEmitsSettle
           activeAnimation?.cancel()
           activeAnimation = null
+          activeAnimationEmitsSettle = false
           stopChoreographer()
           sheetContainer.translationY =
             currentTy.coerceIn(0f, detentSpecs.lastOrNull()?.height ?: currentTy)
           emitPosition()
-          snapToIndex(targetIndex, 0f, emitIndexChange = false, emitSettle = false)
+          snapToIndex(targetIndex, 0f, emitIndexChange = false, emitSettle = shouldEmitSettle)
         } else {
           sheetContainer.translationY = translationY(targetIndex)
           emitPosition()
@@ -308,6 +311,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     targetIndex = index
 
     val targetTy = translationY(index)
+    activeAnimationEmitsSettle = emitSettle
     activeAnimation?.cancel()
 
     val spring = SpringAnimation(sheetContainer, DynamicAnimation.TRANSLATION_Y, targetTy).apply {
@@ -323,6 +327,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
         stopChoreographer()
         emitPosition()
         activeAnimation = null
+        activeAnimationEmitsSettle = false
         updateInteractionState()
         if (emitIndexChange) listener?.onIndexChange(index)
         if (emitSettle) listener?.onSettle(index)

package/ios/RNSBottomSheetHostingView.swift

@@ -35,6 +35,7 @@ public final class RNSBottomSheetHostingView: UIView {
   private let scrimView = UIControl()
   private var panGesture: UIPanGestureRecognizer!
   private var activeAnimator: UIViewPropertyAnimator?
+  private var activeAnimatorEmitsSettle = false
   private var displayLink: CADisplayLink?
   private var pendingIndex: Int?
   private var hasLaidOut = false
@@ -173,14 +174,16 @@ public final class RNSBottomSheetHostingView: UIView {
       if let animator = activeAnimator {
         stopDisplayLink()
         let visualTy = sheetContainer.layer.presentation()?.affineTransform().ty ?? sheetContainer.transform.ty
+        let shouldEmitSettle = activeAnimatorEmitsSettle
         animator.stopAnimation(true)
         activeAnimator = nil
+        activeAnimatorEmitsSettle = false
         sheetContainer.transform = CGAffineTransform(
           translationX: 0,
           y: min(max(visualTy, 0), detentSpecs.last?.height ?? visualTy)
         )
         emitPosition()
-        snapToIndex(targetIndex, velocity: 0, emitIndexChange: false, emitSettle: false)
+        snapToIndex(targetIndex, velocity: 0, emitIndexChange: false, emitSettle: shouldEmitSettle)
       } else {
         sheetContainer.transform = CGAffineTransform(translationX: 0, y: translationY(for: targetIndex))
         emitPosition()
@@ -337,6 +340,7 @@ public final class RNSBottomSheetHostingView: UIView {
     let clampedRatio = min(max(velocityRatio, -5), 5)
     let initialVelocity = CGVector(dx: 0, dy: clampedRatio)
 
+    activeAnimatorEmitsSettle = emitSettle
     activeAnimator?.stopAnimation(true)
 
     let spring = UISpringTimingParameters(dampingRatio: 1.0, initialVelocity: initialVelocity)
@@ -350,6 +354,7 @@ public final class RNSBottomSheetHostingView: UIView {
       self.stopDisplayLink()
       self.emitPosition()
       self.activeAnimator = nil
+      self.activeAnimatorEmitsSettle = false
       self.setContentInteractionEnabled(true)
       self.updateInteractionState()
       if emitIndexChange {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swmansion/react-native-bottom-sheet",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Provides bottom-sheet components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",