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

package/ios/BottomSheetHostingView.swift

@@ -82,6 +82,7 @@ public final class BottomSheetHostingView: UIView {
   private var contentHeightMarker: UIView?
   private weak var surfaceView: UIView?
   private static var markerObservationContext = 0
+  private static let springAnimationKey = "bottomSheetSettle"
 
   override public init(frame: CGRect) {
     super.init(frame: frame)
@@ -187,8 +188,15 @@ public final class BottomSheetHostingView: UIView {
     updateScrim()
   }
 
+  private var presentedSheetFrame: CGRect {
+    if activeSpring != nil, let presentation = sheetContainer.layer.presentation() {
+      return presentation.frame
+    }
+    return sheetContainer.frame
+  }
+
   override public func point(inside point: CGPoint, with _: UIEvent?) -> Bool {
-    if sheetContainer.frame.contains(point) {
+    if presentedSheetFrame.contains(point) {
       return true
     }
 
@@ -198,7 +206,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, !sheetContainer.frame.contains(point) {
+    if isScrimVisible, !presentedSheetFrame.contains(point) {
       let scrimPoint = convert(point, to: scrimView)
       return scrimView.hitTest(scrimPoint, with: event)
     }
@@ -266,6 +274,7 @@ public final class BottomSheetHostingView: UIView {
     activeSpring = nil
     activeSpringEmitsSettle = false
     stopDisplayLink()
+    sheetContainer.layer.removeAnimation(forKey: Self.springAnimationKey)
     rawDetentSpecs = []
     detentSpecs = []
     targetIndex = 0
@@ -345,9 +354,11 @@ public final class BottomSheetHostingView: UIView {
     modal && !scrimView.isHidden
   }
 
-  private func emitPosition() {
+  /// `overrideTy` is the spring's predicted translationY for the upcoming frame
+  /// (passed during a settle). Without it we read the current on-screen value.
+  private func emitPosition(overrideTy: CGFloat? = nil) {
     let maxHeight = sheetContainerHeight
-    let ty = currentTranslationY
+    let ty = overrideTy ?? currentTranslationY
     let position = maxHeight - ty
     updateScrim(forPosition: position)
     updateSheetVisibility(forPosition: position)
@@ -380,7 +391,11 @@ public final class BottomSheetHostingView: UIView {
   }
 
   @objc private func displayLinkFired(_ link: CADisplayLink) {
-    // `targetTimestamp` is predicted when the NEXT frame will be shown
+    // `targetTimestamp` is the predicted display time of the next frame
+    // Ideal synchronization with animations running on the render server
+    // hasn't been achieved. Render server is a black box and it's hard to
+    // find out why exactly. This approach however gives better results
+    // than lagging one frame behind.
     stepSpring(targetTime: link.targetTimestamp)
   }
 
@@ -410,7 +425,12 @@ public final class BottomSheetHostingView: UIView {
       scrimPinnedFull = false
     }
 
-    let currentTy = sheetContainer.transform.ty
+    let currentTy: CGFloat
+    if activeSpring != nil {
+      currentTy = cancelActiveSpring()
+    } else {
+      currentTy = sheetContainer.transform.ty
+    }
     let targetTy = translationY(for: index)
     let distance = targetTy - currentTy
 
@@ -421,45 +441,58 @@ public final class BottomSheetHostingView: UIView {
     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
+    // ω·t ≈ 8, so ω = 8 / duration.
     let omega = 8.0 / CGFloat(duration)
     activeSpringEmitsSettle = emitSettle
     activeSpringTargetIndex = index
 
-    activeSpring = CriticalSpring(
+    // The single instant both the modal animation and the follower curve are anchored to.
+    let startTime = CACurrentMediaTime()
+    let spring = CriticalSpring(
       from: currentTy,
       target: targetTy,
       v0: v0,
       omega: omega,
-      startTime: CACurrentMediaTime(),
+      startTime: startTime,
       duration: duration
     )
 
+    // The sheet is animated on the render server from samples of the same spring
+    // that feeds the follower position events.
+    let animation = CAKeyframeAnimation(keyPath: "transform.translation.y")
+    let sampleCount = max(Int((duration * 120).rounded()), 1)
+    animation.values = spring.keyframeValues(count: sampleCount)
+    animation.keyTimes = (0...sampleCount).map {
+      NSNumber(value: Double($0) / Double(sampleCount))
+    }
+    animation.duration = duration
+    animation.calculationMode = .linear
+    animation.beginTime = sheetContainer.layer.convertTime(startTime, from: nil)
+    animation.isRemovedOnCompletion = false
+    animation.fillMode = .forwards
+    animation.delegate = self
+
+    sheetContainer.transform = CGAffineTransform(translationX: 0, y: targetTy)
+    sheetContainer.layer.add(animation, forKey: Self.springAnimationKey)
+    activeSpring = spring
+
+    startDisplayLink()
+
     // 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)
     }
-    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()
+    emitPosition(overrideTy: spring.value(at: targetTime))
   }
 
   private func finishSpring() {
+    guard activeSpring != nil else { return }
     let index = activeSpringTargetIndex
     let emitSettle = activeSpringEmitsSettle
     let targetTy = translationY(for: index)
@@ -467,6 +500,7 @@ public final class BottomSheetHostingView: UIView {
     activeSpring = nil
     activeSpringEmitsSettle = false
     stopDisplayLink()
+    sheetContainer.layer.removeAnimation(forKey: Self.springAnimationKey)
 
     sheetContainer.transform = CGAffineTransform(translationX: 0, y: targetTy)
     emitPosition()
@@ -478,6 +512,17 @@ public final class BottomSheetHostingView: UIView {
     }
   }
 
+  @discardableResult
+  private func cancelActiveSpring() -> CGFloat {
+    let visualTy = sheetContainer.layer.presentation()?.affineTransform().ty ?? sheetContainer.transform.ty
+    activeSpring = nil
+    activeSpringEmitsSettle = false
+    stopDisplayLink()
+    sheetContainer.layer.removeAnimation(forKey: Self.springAnimationKey)
+    sheetContainer.transform = CGAffineTransform(translationX: 0, y: visualTy)
+    return visualTy
+  }
+
   @objc private func handlePan(_ gesture: UIPanGestureRecognizer) {
     let maxHeight = sheetContainerHeight
 
@@ -494,9 +539,7 @@ public final class BottomSheetHostingView: UIView {
       }
       gesture.setTranslation(.zero, in: self)
       if activeSpring != nil {
-        stopDisplayLink()
-        activeSpring = nil
-        activeSpringEmitsSettle = false
+        cancelActiveSpring()
       }
 
     case .changed:
@@ -715,12 +758,8 @@ public final class BottomSheetHostingView: UIView {
       let targetTy = translationY(for: targetIndex)
 
       if activeSpring != nil {
-        stopDisplayLink()
-        // `transform.ty` is the live on-screen value (set each frame).
-        let visualTy = sheetContainer.transform.ty
         let shouldEmitSettle = activeSpringEmitsSettle
-        activeSpring = nil
-        activeSpringEmitsSettle = false
+        let visualTy = cancelActiveSpring()
         // 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
@@ -807,6 +846,8 @@ public final class BottomSheetHostingView: UIView {
 
   deinit {
     stopObservingContentHeightMarker()
+    displayLink?.invalidate()
+    sheetContainer.layer.removeAnimation(forKey: Self.springAnimationKey)
   }
 
   private func findContentHeightMarker() -> UIView? {
@@ -842,6 +883,13 @@ public final class BottomSheetHostingView: UIView {
   }
 }
 
+extension BottomSheetHostingView: CAAnimationDelegate {
+  public func animationDidStop(_: CAAnimation, finished: Bool) {
+    guard finished, activeSpring != nil else { return }
+    finishSpring()
+  }
+}
+
 extension BottomSheetHostingView: UIGestureRecognizerDelegate {
   public func gestureRecognizer(
     _ gestureRecognizer: UIGestureRecognizer,
@@ -861,10 +909,13 @@ extension BottomSheetHostingView: UIGestureRecognizerDelegate {
 
 private extension BottomSheetHostingView {
   var currentTranslationY: CGFloat {
-    // 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.)
+    // During a settle the modal is driven by a keyframe animation on the render
+    // server, so the live on-screen value lives on the presentation layer (the
+    // model `transform` already holds the final target). A drag assigns
+    // `transform` directly, so outside a settle the model value is correct.
+    if activeSpring != nil, let presentation = sheetContainer.layer.presentation() {
+      return presentation.affineTransform().ty
+    }
     return sheetContainer.transform.ty
   }
 

package/ios/CriticalSpring.swift

@@ -1,19 +1,16 @@
 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.
+/// 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;
+  /// Angular frequency (rad/sec) — the spring's stiffness/speed. Higher ω snaps faster.
   let omega: CGFloat
+  /// Absolute media time the curve starts at — the same instant the modal's
+  /// keyframe animation is pinned to via its `beginTime`, so `value(at:)` and the
+  /// modal share one clock.
   let startTime: CFTimeInterval
   let duration: CFTimeInterval
 
@@ -33,7 +30,15 @@ struct CriticalSpring {
     return target + decay * (a + (v0 + omega * a) * t)
   }
 
-  func isFinished(at time: CFTimeInterval) -> Bool {
-    time - startTime >= duration
+  /// Samples this curve into `count + 1` evenly-spaced points over `[0, duration]`
+  /// for use as `CAKeyframeAnimation.values`. CA replays these samples on the
+  /// render server, while `value(at:)` feeds the follower from the analytical
+  /// spring on the app thread.
+  func keyframeValues(count: Int) -> [CGFloat] {
+    let n = max(count, 1)
+    return (0...n).map { i in
+      let t = duration * CFTimeInterval(i) / CFTimeInterval(n)
+      return value(at: startTime + t)
+    }
   }
 }

package/package.json

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