@swmansion/react-native-bottom-sheet 0.15.0-next.1 → 0.15.0-next.2

package/ios/BottomSheetHostingView.swift

@@ -68,8 +68,9 @@ public final class BottomSheetHostingView: UIView {
   public let sheetContainer = UIView()
   private let scrimView = UIControl()
   private var panGesture: UIPanGestureRecognizer!
-  private var activeAnimator: UIViewPropertyAnimator?
-  private var activeAnimatorEmitsSettle = false
+  private var activeSpring: CriticalSpring?
+  private var activeSpringTargetIndex: Int = 0
+  private var activeSpringEmitsSettle = false
   private var scrimPinnedFull = false
   private var displayLink: CADisplayLink?
   private var pendingIndex: Int?
@@ -181,20 +182,13 @@ public final class BottomSheetHostingView: UIView {
       return
     }
 
-    if activeAnimator != nil || isPanning { return }
+    if activeSpring != nil || isPanning { return }
     sheetContainer.transform = CGAffineTransform(translationX: 0, y: translationY(for: targetIndex))
     updateScrim()
   }
 
-  private var presentedSheetFrame: CGRect {
-    if activeAnimator != nil, let presentation = sheetContainer.layer.presentation() {
-      return presentation.frame
-    }
-    return sheetContainer.frame
-  }
-
   override public func point(inside point: CGPoint, with _: UIEvent?) -> Bool {
-    if presentedSheetFrame.contains(point) {
+    if sheetContainer.frame.contains(point) {
       return true
     }
 
@@ -204,7 +198,7 @@ public final class BottomSheetHostingView: 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, !sheetContainer.frame.contains(point) {
       let scrimPoint = convert(point, to: scrimView)
       return scrimView.hitTest(scrimPoint, with: event)
     }
@@ -269,8 +263,8 @@ public final class BottomSheetHostingView: UIView {
   }
 
   public func resetSheetState() {
-    activeAnimator?.stopAnimation(true)
-    activeAnimator = nil
+    activeSpring = nil
+    activeSpringEmitsSettle = false
     stopDisplayLink()
     rawDetentSpecs = []
     detentSpecs = []
@@ -364,7 +358,7 @@ public final class BottomSheetHostingView: UIView {
 
   private func startDisplayLink() {
     guard displayLink == nil else { return }
-    let link = CADisplayLink(target: self, selector: #selector(displayLinkFired))
+    let link = CADisplayLink(target: self, selector: #selector(displayLinkFired(_:)))
     link.add(to: .main, forMode: .common)
     displayLink = link
   }
@@ -385,8 +379,9 @@ public final class BottomSheetHostingView: UIView {
     isContentInteractionDisabled = !isEnabled
   }
 
-  @objc private func displayLinkFired() {
-    emitPosition()
+  @objc private func displayLinkFired(_ link: CADisplayLink) {
+    // `targetTimestamp` is predicted when the NEXT frame will be shown
+    stepSpring(targetTime: link.targetTimestamp)
   }
 
   @objc private func handleScrimPress() {
@@ -394,7 +389,7 @@ public final class BottomSheetHostingView: UIView {
       modal,
       let closedIndex,
       targetIndex != closedIndex,
-      activeAnimator == nil || currentSheetHeight > 0.5
+      activeSpring == nil || currentSheetHeight > 0.5
     else {
       return
     }
@@ -418,43 +413,71 @@ public final class BottomSheetHostingView: UIView {
     let currentTy = sheetContainer.transform.ty
     let targetTy = translationY(for: index)
     let distance = targetTy - currentTy
+
     let velocityRatio = distance != 0 ? velocity / distance : 0
     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)
-    let animator = UIViewPropertyAnimator(duration: 0.45, timingParameters: spring)
-
-    animator.addAnimations {
-      self.sheetContainer.transform = CGAffineTransform(translationX: 0, y: targetTy)
-    }
-    animator.addCompletion { [weak self] position in
-      guard let self, position == .end else { return }
-      self.stopDisplayLink()
-      self.emitPosition()
-      self.activeAnimator = nil
-      self.activeAnimatorEmitsSettle = false
-      self.scrimPinnedFull = false
-      self.setContentInteractionEnabled(true)
-      self.updateInteractionState()
-      if emitSettle {
-        self.eventDelegate?.bottomSheetHostingView(self, didSettle: index)
-      }
-    }
+    let v0 = clampedRatio * distance
+
+    let duration: CFTimeInterval = 0.45
+    // Pick the stiffness so the sheet looks settled (within ~0.5% of target)
+    // right at `duration`. For a critically-damped spring that point is
+    // ω·t ≈ 8, so ω = 8 / duration. Exact agreement with UIKit's spring doesn't
+    // matter here — we drive the modal from this curve.
+    //
+    // NOTE: This solution may affect the animation performance when the main thread is busy.
+    // If that becomes a problem, consider adopting this solution: https://github.com/kirillzyusko/react-native-keyboard-controller/pull/412
+    let omega = 8.0 / CGFloat(duration)
+    activeSpringEmitsSettle = emitSettle
+    activeSpringTargetIndex = index
+
+    activeSpring = CriticalSpring(
+      from: currentTy,
+      target: targetTy,
+      v0: v0,
+      omega: omega,
+      startTime: CACurrentMediaTime(),
+      duration: duration
+    )
+
     // Report the index change as soon as the snap is committed, not when it
     // finishes: `targetIndex` is already set, and a programmatic snap's start is
     // known to the caller. `onSettle` remains the signal for movement end.
     if emitIndexChange {
       eventDelegate?.bottomSheetHostingView(self, didChangeIndex: index)
     }
-    animator.startAnimation()
-    activeAnimator = animator
     startDisplayLink()
   }
 
+  private func stepSpring(targetTime: CFTimeInterval) {
+    guard let spring = activeSpring else { return }
+    if spring.isFinished(at: targetTime) {
+      finishSpring()
+      return
+    }
+    let ty = spring.value(at: targetTime)
+    sheetContainer.transform = CGAffineTransform(translationX: 0, y: ty)
+    emitPosition()
+  }
+
+  private func finishSpring() {
+    let index = activeSpringTargetIndex
+    let emitSettle = activeSpringEmitsSettle
+    let targetTy = translationY(for: index)
+
+    activeSpring = nil
+    activeSpringEmitsSettle = false
+    stopDisplayLink()
+
+    sheetContainer.transform = CGAffineTransform(translationX: 0, y: targetTy)
+    emitPosition()
+    scrimPinnedFull = false
+    setContentInteractionEnabled(true)
+    updateInteractionState()
+    if emitSettle {
+      eventDelegate?.bottomSheetHostingView(self, didSettle: index)
+    }
+  }
+
   @objc private func handlePan(_ gesture: UIPanGestureRecognizer) {
     let maxHeight = sheetContainerHeight
 
@@ -470,12 +493,10 @@ public final class BottomSheetHostingView: UIView {
         handler.isEnabled = true
       }
       gesture.setTranslation(.zero, in: self)
-      if let animator = activeAnimator {
+      if activeSpring != nil {
         stopDisplayLink()
-        let visual = sheetContainer.layer.presentation()?.affineTransform() ?? sheetContainer.transform
-        animator.stopAnimation(true)
-        sheetContainer.transform = visual
-        activeAnimator = nil
+        activeSpring = nil
+        activeSpringEmitsSettle = false
       }
 
     case .changed:
@@ -693,13 +714,13 @@ public final class BottomSheetHostingView: UIView {
       let newMaxHeight = sheetContainerHeight
       let targetTy = translationY(for: targetIndex)
 
-      if let animator = activeAnimator {
+      if activeSpring != nil {
         stopDisplayLink()
-        let visualTy = sheetContainer.layer.presentation()?.affineTransform().ty ?? sheetContainer.transform.ty
-        let shouldEmitSettle = activeAnimatorEmitsSettle
-        animator.stopAnimation(true)
-        activeAnimator = nil
-        activeAnimatorEmitsSettle = false
+        // `transform.ty` is the live on-screen value (set each frame).
+        let visualTy = sheetContainer.transform.ty
+        let shouldEmitSettle = activeSpringEmitsSettle
+        activeSpring = nil
+        activeSpringEmitsSettle = false
         // Re-anchor the in-flight position to the new container height so the
         // sheet surface keeps the same on-screen height across the resize.
         let visibleHeight = previousMaxHeight - visualTy
@@ -840,9 +861,10 @@ extension BottomSheetHostingView: UIGestureRecognizerDelegate {
 
 private extension BottomSheetHostingView {
   var currentTranslationY: CGFloat {
-    if activeAnimator != nil, let presentation = sheetContainer.layer.presentation() {
-      return presentation.affineTransform().ty
-    }
+    // Both the drag and the settle assign `transform` directly every frame, so
+    // it always holds the live on-screen value. (If the settle were run by a
+    // UIViewPropertyAnimator instead, the in-flight value would live on the
+    // render server and we'd have to read `layer.presentation()` here.)
     return sheetContainer.transform.ty
   }
 
@@ -868,7 +890,7 @@ private extension BottomSheetHostingView {
     if
       let closedIndex,
       targetIndex == closedIndex,
-      activeAnimator == nil,
+      activeSpring == nil,
       !isPanning
     {
       scrimView.alpha = 0

package/ios/CriticalSpring.swift

@@ -0,0 +1,39 @@
+import QuartzCore
+
+/// A spring we evaluate ourselves each frame instead of letting
+/// `UIViewPropertyAnimator` run the settle. The animator runs on the "render
+/// server", so its value is only readable one frame late via `presentation()` —
+/// the cause of the follower view (fed by `onPositionChange`) trailing the
+/// modal. Computing it in-process lets us emit the exact value we set.
+/// Critically damped (ζ = 1): reaches the target as fast as possible without
+/// overshooting.
+struct CriticalSpring {
+  let from: CGFloat
+  let target: CGFloat
+  /// Initial velocity (points/sec) — e.g. carried over from a finger flick.
+  let v0: CGFloat
+  /// Angular frequency (rad/sec) — the spring's stiffness/speed. Higher ω snaps faster;
+  let omega: CGFloat
+  let startTime: CFTimeInterval
+  let duration: CFTimeInterval
+
+  /// Position at an absolute `time`, from the closed-form solution of a
+  /// critically-damped spring (ζ = 1):
+  ///   x(t) = target + e^(−ω·t)·[A + (v0 + ω·A)·t]
+  /// where A is the starting offset from the target. The `e^(−ω·t)` term decays
+  /// the offset toward 0 (so x → target), and the linear `…·t` factor is what
+  /// lets a critically-damped spring carry initial velocity without oscillating.
+  func value(at time: CFTimeInterval) -> CGFloat {
+    // Seconds since the spring started (clamped so a past `time` reads as t = 0).
+    let t = CGFloat(max(0, time - startTime))
+    // A: how far `from` is from `target` — the offset the spring must close.
+    let a = from - target
+    // Exponential envelope: 1 at t = 0, shrinking toward 0 as time passes.
+    let decay = exp(-omega * t)
+    return target + decay * (a + (v0 + omega * a) * t)
+  }
+
+  func isFinished(at time: CFTimeInterval) -> Bool {
+    time - startTime >= duration
+  }
+}

package/package.json

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