@swmansion/react-native-bottom-sheet 0.9.0-next.3 → 0.9.0

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

@@ -17,8 +17,8 @@ import androidx.dynamicanimation.animation.SpringForce
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.uimanager.PointerEvents
 import com.facebook.react.uimanager.StateWrapper
-import com.facebook.react.views.view.ReactViewGroup
 import com.facebook.react.uimanager.events.NativeGestureUtil
+import com.facebook.react.views.view.ReactViewGroup
 import kotlin.math.abs
 
 private enum class DetentKind {
@@ -27,11 +27,14 @@ private enum class DetentKind {
 }
 
 private data class RawDetentSpec(val value: Float, val kind: DetentKind, val programmatic: Boolean)
+
 private data class DetentSpec(val height: Float, val programmatic: Boolean)
 
 interface BottomSheetViewListener {
   fun onIndexChange(index: Int)
+
   fun onSettle(index: Int)
+
   fun onPositionChange(position: Double)
 }
 
@@ -54,6 +57,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
       updateInteractionState()
       updateScrim()
     }
+
   var disableScrollableNegotiation: Boolean = false
   private var pendingIndex: Int? = null
   private var hasLaidOut = false
@@ -76,15 +80,14 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   private var lastTouchY = 0f
   private var activePointerId = MotionEvent.INVALID_POINTER_ID
   private var scrimPressed = false
+  private var scrimTouchActive = false
   private var scrimColor = Color.TRANSPARENT
   private var scrimProgress = 0f
   private var maxDetentHeight = Float.NaN
   private var contentHeightMarker: View? = null
 
   private val contentHeightMarkerLayoutListener =
-    View.OnLayoutChangeListener { _, _, _, _, _, _, _, _, _ ->
-      refreshDetentsFromLayout()
-    }
+    View.OnLayoutChangeListener { _, _, _, _, _, _, _, _, _ -> refreshDetentsFromLayout() }
 
   init {
     clipChildren = false
@@ -198,16 +201,17 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   // MARK: - Prop setters
 
   fun setDetents(raw: List<Map<String, Any>>) {
-    rawDetentSpecs = raw.mapNotNull { dict ->
-      val value = (dict["value"] as? Number)?.toDouble() ?: return@mapNotNull null
-      val kind =
-        when ((dict["kind"] as? String)?.lowercase()) {
-          "content" -> DetentKind.CONTENT
-          else -> DetentKind.POINTS
-        }
-      val programmatic = dict["programmatic"] as? Boolean ?: false
-      RawDetentSpec(value = (value * density).toFloat(), kind = kind, programmatic = programmatic)
-    }
+    rawDetentSpecs =
+      raw.mapNotNull { dict ->
+        val value = (dict["value"] as? Number)?.toDouble() ?: return@mapNotNull null
+        val kind =
+          when ((dict["kind"] as? String)?.lowercase()) {
+            "content" -> DetentKind.CONTENT
+            else -> DetentKind.POINTS
+          }
+        val programmatic = dict["programmatic"] as? Boolean ?: false
+        RawDetentSpec(value = (value * density).toFloat(), kind = kind, programmatic = programmatic)
+      }
     refreshDetentsFromLayout()
   }
 
@@ -323,6 +327,12 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     return maxHeight - snapHeight
   }
 
+  private val minDetentTranslationY: Float
+    get() = detentSpecs.indices.minOfOrNull(::translationY) ?: 0f
+
+  private val maxDetentTranslationY: Float
+    get() = detentSpecs.indices.maxOfOrNull(::translationY) ?: 0f
+
   private val closedIndex: Int?
     get() = detentSpecs.indexOfFirst { it.height == 0f }.takeIf { it >= 0 }
 
@@ -377,12 +387,13 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   private fun startChoreographer() {
     if (choreographerCallback != null) return
-    val callback = object : Choreographer.FrameCallback {
-      override fun doFrame(frameTimeNanos: Long) {
-        emitPosition()
-        choreographerCallback?.let { Choreographer.getInstance().postFrameCallback(it) }
+    val callback =
+      object : Choreographer.FrameCallback {
+        override fun doFrame(frameTimeNanos: Long) {
+          emitPosition()
+          choreographerCallback?.let { Choreographer.getInstance().postFrameCallback(it) }
+        }
       }
-    }
     choreographerCallback = callback
     Choreographer.getInstance().postFrameCallback(callback)
   }
@@ -407,25 +418,29 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     activeAnimationEmitsSettle = emitSettle
     activeAnimation?.cancel()
 
-    val spring = SpringAnimation(sheetContainer, DynamicAnimation.TRANSLATION_Y, targetTy).apply {
-      spring = SpringForce(targetTy).apply {
-        dampingRatio = SpringForce.DAMPING_RATIO_NO_BOUNCY
-        stiffness = SpringForce.STIFFNESS_MEDIUM
-      }
-      setStartVelocity(velocity)
-      addEndListener { _, canceled, _, _ ->
-        if (canceled) {
-          return@addEndListener
+    val spring =
+      SpringAnimation(sheetContainer, DynamicAnimation.TRANSLATION_Y, targetTy).apply {
+        spring =
+          SpringForce(targetTy).apply {
+            dampingRatio = SpringForce.DAMPING_RATIO_NO_BOUNCY
+            stiffness = SpringForce.STIFFNESS_MEDIUM
+          }
+        setMinValue(minDetentTranslationY)
+        setMaxValue(maxDetentTranslationY)
+        setStartVelocity(velocity)
+        addEndListener { _, canceled, _, _ ->
+          if (canceled) {
+            return@addEndListener
+          }
+          stopChoreographer()
+          emitPosition()
+          activeAnimation = null
+          activeAnimationEmitsSettle = false
+          updateInteractionState()
+          if (emitIndexChange) listener?.onIndexChange(index)
+          if (emitSettle) listener?.onSettle(index)
         }
-        stopChoreographer()
-        emitPosition()
-        activeAnimation = null
-        activeAnimationEmitsSettle = false
-        updateInteractionState()
-        if (emitIndexChange) listener?.onIndexChange(index)
-        if (emitSettle) listener?.onSettle(index)
       }
-    }
 
     activeAnimation = spring
     startChoreographer()
@@ -440,11 +455,13 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
     if (velocity < -flickThreshold) {
       return draggable.firstOrNull { it.value.height > currentHeight }?.index
-        ?: draggable.lastOrNull()?.index ?: targetIndex
+        ?: draggable.lastOrNull()?.index
+        ?: targetIndex
     }
     if (velocity > flickThreshold) {
       return draggable.lastOrNull { it.value.height < currentHeight }?.index
-        ?: draggable.firstOrNull()?.index ?: targetIndex
+        ?: draggable.firstOrNull()?.index
+        ?: targetIndex
     }
 
     return draggable.minByOrNull { abs(it.value.height - currentHeight) }?.index ?: targetIndex
@@ -459,7 +476,9 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
         initialTouchX = ev.x
         initialTouchY = ev.y
         lastTouchY = ev.y
+        activePointerId = ev.getPointerId(0)
         scrimPressed = true
+        scrimTouchActive = true
         return true
       }
       return false
@@ -503,18 +522,20 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
           }
         }
       }
-      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+      MotionEvent.ACTION_UP,
+      MotionEvent.ACTION_CANCEL -> {
         initialTouchX = 0f
         initialTouchY = 0f
         activePointerId = MotionEvent.INVALID_POINTER_ID
         scrimPressed = false
+        scrimTouchActive = false
       }
     }
     return false
   }
 
   override fun onTouchEvent(event: MotionEvent): Boolean {
-    if (scrimPressed) {
+    if (scrimTouchActive) {
       when (event.actionMasked) {
         MotionEvent.ACTION_MOVE -> {
           val sheetTop = sheetContainer.top + sheetContainer.translationY
@@ -525,14 +546,22 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
         }
         MotionEvent.ACTION_UP -> {
           val closeIndex = closedIndex
+          val shouldDismiss = scrimPressed && isScrimVisible()
           scrimPressed = false
-          if (closeIndex != null && isScrimVisible()) {
+          scrimTouchActive = false
+          activePointerId = MotionEvent.INVALID_POINTER_ID
+          if (shouldDismiss && closeIndex != null) {
             snapToIndex(closeIndex, 0f)
           }
           return true
         }
         MotionEvent.ACTION_CANCEL -> {
           scrimPressed = false
+          scrimTouchActive = false
+          activePointerId = MotionEvent.INVALID_POINTER_ID
+          return true
+        }
+        MotionEvent.ACTION_POINTER_UP -> {
           return true
         }
       }
@@ -553,15 +582,17 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
         emitPosition()
         return true
       }
-      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+      MotionEvent.ACTION_UP,
+      MotionEvent.ACTION_CANCEL -> {
         isPanning = false
         activePointerId = MotionEvent.INVALID_POINTER_ID
-        val velocity = velocityTracker?.let { tracker ->
-          tracker.computeCurrentVelocity(1000)
-          val v = tracker.yVelocity
-          tracker.recycle()
-          v
-        } ?: 0f
+        val velocity =
+          velocityTracker?.let { tracker ->
+            tracker.computeCurrentVelocity(1000)
+            val v = tracker.yVelocity
+            tracker.recycle()
+            v
+          } ?: 0f
         velocityTracker = null
         val maxHeight = detentSpecs.maxOfOrNull { it.height } ?: resolvedMaxDetentHeight()
         val currentHeight = maxHeight - sheetContainer.translationY
@@ -616,9 +647,9 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     val containerY = initialTouchY - sheetContainer.top - sheetContainer.translationY
     if (
       containerX < 0f ||
-      containerX >= sheetContainer.width ||
-      containerY < 0f ||
-      containerY >= sheetContainer.height
+        containerX >= sheetContainer.width ||
+        containerY < 0f ||
+        containerY >= sheetContainer.height
     ) {
       return null
     }
@@ -636,7 +667,9 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
         if (childX < 0f || childX >= child.width || childY < 0f || childY >= child.height) {
           continue
         }
-        findScrollableAtPoint(child, childX, childY)?.let { return it }
+        findScrollableAtPoint(child, childX, childY)?.let {
+          return it
+        }
       }
     }
 
@@ -680,6 +713,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     lastTouchY = 0f
     activePointerId = MotionEvent.INVALID_POINTER_ID
     scrimPressed = false
+    scrimTouchActive = false
     sheetContainer.translationY = 0f
     scrimProgress = 0f
     sheetContainer.removeAllViews()
@@ -696,15 +730,16 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
     // When settled at the closed detent, dynamic content updates can briefly
     // produce stale non-zero positions. Keep scrim hidden in this state.
-    if (closedIndex != null && targetIndex == closedIndex && activeAnimation == null && !isPanning) {
+    if (
+      closedIndex != null && targetIndex == closedIndex && activeAnimation == null && !isPanning
+    ) {
       scrimProgress = 0f
       invalidate()
       return
     }
 
     val threshold = firstNonZeroDetentHeight
-    scrimProgress =
-      if (threshold <= 0f) 0f else (position / threshold).coerceIn(0f, 1f)
+    scrimProgress = if (threshold <= 0f) 0f else (position / threshold).coerceIn(0f, 1f)
     invalidate()
   }
 

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

@@ -14,8 +14,7 @@ import com.facebook.react.viewmanagers.BottomSheetViewManagerInterface
 
 @ReactModule(name = BottomSheetViewManager.NAME)
 class BottomSheetViewManager :
-  ViewGroupManager<BottomSheetView>(),
-  BottomSheetViewManagerInterface<BottomSheetView> {
+  ViewGroupManager<BottomSheetView>(), BottomSheetViewManagerInterface<BottomSheetView> {
 
   companion object {
     const val NAME = "BottomSheetView"
@@ -29,37 +28,37 @@ class BottomSheetViewManager :
 
   override fun createViewInstance(context: ThemedReactContext): BottomSheetView {
     val view = BottomSheetView(context)
-    view.listener = object : BottomSheetViewListener {
-      override fun onIndexChange(index: Int) {
-        val event = com.facebook.react.bridge.Arguments.createMap().apply {
-          putInt("index", index)
+    view.listener =
+      object : BottomSheetViewListener {
+        override fun onIndexChange(index: Int) {
+          val event =
+            com.facebook.react.bridge.Arguments.createMap().apply { putInt("index", index) }
+          val reactContext = view.context as? ThemedReactContext ?: return
+          reactContext
+            .getJSModule(com.facebook.react.uimanager.events.RCTEventEmitter::class.java)
+            .receiveEvent(view.id, "topIndexChange", event)
         }
-        val reactContext = view.context as? ThemedReactContext ?: return
-        reactContext
-          .getJSModule(com.facebook.react.uimanager.events.RCTEventEmitter::class.java)
-          .receiveEvent(view.id, "topIndexChange", event)
-      }
 
-      override fun onSettle(index: Int) {
-        val event = com.facebook.react.bridge.Arguments.createMap().apply {
-          putInt("index", index)
+        override fun onSettle(index: Int) {
+          val event =
+            com.facebook.react.bridge.Arguments.createMap().apply { putInt("index", index) }
+          val reactContext = view.context as? ThemedReactContext ?: return
+          reactContext
+            .getJSModule(com.facebook.react.uimanager.events.RCTEventEmitter::class.java)
+            .receiveEvent(view.id, "topSettle", event)
         }
-        val reactContext = view.context as? ThemedReactContext ?: return
-        reactContext
-          .getJSModule(com.facebook.react.uimanager.events.RCTEventEmitter::class.java)
-          .receiveEvent(view.id, "topSettle", event)
-      }
 
-      override fun onPositionChange(position: Double) {
-        val event = com.facebook.react.bridge.Arguments.createMap().apply {
-          putDouble("position", position)
+        override fun onPositionChange(position: Double) {
+          val event =
+            com.facebook.react.bridge.Arguments.createMap().apply {
+              putDouble("position", position)
+            }
+          val reactContext = view.context as? ThemedReactContext ?: return
+          reactContext
+            .getJSModule(com.facebook.react.uimanager.events.RCTEventEmitter::class.java)
+            .receiveEvent(view.id, "topPositionChange", event)
         }
-        val reactContext = view.context as? ThemedReactContext ?: return
-        reactContext
-          .getJSModule(com.facebook.react.uimanager.events.RCTEventEmitter::class.java)
-          .receiveEvent(view.id, "topPositionChange", event)
       }
-    }
     return view
   }
 
@@ -69,7 +68,8 @@ class BottomSheetViewManager :
 
   override fun getChildCount(parent: BottomSheetView): Int = parent.sheetChildCount
 
-  override fun getChildAt(parent: BottomSheetView, index: Int): View? = parent.getSheetChildAt(index)
+  override fun getChildAt(parent: BottomSheetView, index: Int): View? =
+    parent.getSheetChildAt(index)
 
   override fun removeViewAt(parent: BottomSheetView, index: Int) {
     parent.removeSheetChildAt(index)

package/ios/RNSBottomSheetHostingView.swift

@@ -28,12 +28,15 @@ public final class RNSBottomSheetHostingView: UIView {
   public var modal: Bool = false {
     didSet { updateScrim() }
   }
+
   public var scrimColor: UIColor? = .clear {
     didSet { scrimView.backgroundColor = scrimColor }
   }
+
   public var maxDetentHeight: CGFloat = .nan {
     didSet { refreshDetentsFromLayout() }
   }
+
   public var disableScrollableNegotiation: Bool = false
 
   private var rawDetentSpecs: [RawDetentSpec] = []
@@ -59,7 +62,7 @@ public final class RNSBottomSheetHostingView: UIView {
   private var isContentInteractionDisabled = false
   private weak var contentHeightMarker: UIView?
 
-  public override init(frame: CGRect) {
+  override public init(frame: CGRect) {
     super.init(frame: frame)
     backgroundColor = .clear
     clipsToBounds = false
@@ -84,19 +87,20 @@ public final class RNSBottomSheetHostingView: UIView {
     sheetContainer.addGestureRecognizer(panGesture)
   }
 
-  public required init?(coder: NSCoder) {
+  @available(*, unavailable)
+  public required init?(coder _: NSCoder) {
     fatalError("init(coder:) has not been implemented")
   }
 
-  // RCTSurfaceTouchHandler dispatches touch events to JS independently of the
-  // pan gesture (it fires in touchesBegan: regardless of its recognizer state).
-  // We cache it here and toggle isEnabled in handlePan(.began) to force a
-  // touchesCancelled dispatch to JS, preventing Pressable from firing onPress
-  // during a sheet drag. This is the iOS equivalent of Android's
-  // NativeGestureUtil.notifyNativeGestureStarted.
+  /// RCTSurfaceTouchHandler dispatches touch events to JS independently of the
+  /// pan gesture (it fires in touchesBegan: regardless of its recognizer state).
+  /// We cache it here and toggle isEnabled in handlePan(.began) to force a
+  /// touchesCancelled dispatch to JS, preventing Pressable from firing onPress
+  /// during a sheet drag. This is the iOS equivalent of Android's
+  /// NativeGestureUtil.notifyNativeGestureStarted.
   private weak var surfaceTouchHandler: UIGestureRecognizer?
 
-  public override func didMoveToWindow() {
+  override public func didMoveToWindow() {
     super.didMoveToWindow()
     surfaceTouchHandler = nil
     guard window != nil else { return }
@@ -112,7 +116,7 @@ public final class RNSBottomSheetHostingView: UIView {
     }
   }
 
-  public override func layoutSubviews() {
+  override public func layoutSubviews() {
     super.layoutSubviews()
     guard bounds.width > 0, bounds.height > 0 else { return }
 
@@ -152,7 +156,7 @@ public final class RNSBottomSheetHostingView: UIView {
     return sheetContainer.frame
   }
 
-  public override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
+  override public func point(inside point: CGPoint, with _: UIEvent?) -> Bool {
     if presentedSheetFrame.contains(point) {
       return true
     }
@@ -160,10 +164,10 @@ public final class RNSBottomSheetHostingView: UIView {
     return isScrimVisible && bounds.contains(point)
   }
 
-  public override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
+  override public func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
     guard self.point(inside: point, with: event) else { return nil }
 
-    if isScrimVisible && !presentedSheetFrame.contains(point) {
+    if isScrimVisible, !presentedSheetFrame.contains(point) {
       let scrimPoint = convert(point, to: scrimView)
       return scrimView.hitTest(scrimPoint, with: event)
     }
@@ -475,7 +479,7 @@ public final class RNSBottomSheetHostingView: UIView {
     return nil
   }
 
-  public override func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
+  override public func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
     guard gestureRecognizer === panGesture else { return true }
 
     let velocity = panGesture.velocity(in: self)
@@ -552,7 +556,7 @@ public final class RNSBottomSheetHostingView: UIView {
       return
     }
 
-    if hasLaidOut && !isPanning {
+    if hasLaidOut, !isPanning {
       targetIndex = max(0, min(detentSpecs.count - 1, targetIndex))
 
       if let animator = activeAnimator {
@@ -606,8 +610,8 @@ extension RNSBottomSheetHostingView: UIGestureRecognizerDelegate {
   }
 
   public func gestureRecognizer(
-    _ gestureRecognizer: UIGestureRecognizer,
-    shouldRecognizeSimultaneouslyWith other: UIGestureRecognizer
+    _: UIGestureRecognizer,
+    shouldRecognizeSimultaneouslyWith _: UIGestureRecognizer
   ) -> Bool {
     return false
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swmansion/react-native-bottom-sheet",
-  "version": "0.9.0-next.3",
+  "version": "0.9.0",
   "description": "Provides bottom-sheet components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -35,7 +35,7 @@
   "scripts": {
     "example": "yarn workspace @swmansion/react-native-bottom-sheet-example",
     "clean": "del-cli lib",
-    "prepare": "bob build",
+    "prepare": "lefthook install && bob build",
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\""
   },
@@ -69,6 +69,7 @@
     "eslint": "9.39.2",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-prettier": "5.5.5",
+    "lefthook": "2.1.6",
     "prettier": "2.8.8",
     "react": "19.1.0",
     "react-native": "0.81.5",