react-native-smooth-clip-view 0.2.5 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-smooth-clip-view",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Layout-free animated rounded clipping for React Native Fabric",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",

package/src/NativeSmoothClipModule.ts

@@ -18,7 +18,8 @@ export interface Spec extends TurboModule {
     radius: CodegenTypes.Double,
     contentTranslateX: CodegenTypes.Double,
     contentTranslateY: CodegenTypes.Double,
-    takeOwnership: boolean
+    takeOwnership: boolean,
+    overridePendingAnimation: boolean
   ): void;
   beginInteraction(
     driverId: CodegenTypes.Double

package/src/driverTypes.ts

@@ -16,8 +16,9 @@ type ClipAnimationBase = Readonly<{
    * On the native drivers `driver.presentation.value` is not written from
    * `from` (it stays stale until success sets it to the target); the web
    * fallback does write it — its presentation SharedValue is the render
-   * channel itself. Against a held pending-animation latch the seed is
-   * dropped by design — latch intent wins.
+   * channel itself. Against a held pending-animation latch, explicit `from`
+   * is newer intent: the fused write cancels that latch once unfinished,
+   * applies `from`, and starts the replacement from that native value.
    *
    * Keyframes interpolate absolutely, so pass `frames[0].presentation` —
    * the seed renders it before the first animation frame, making the

package/src/drivers.native.ts

@@ -46,9 +46,25 @@ const NATIVE = 1;
 
 const setPresentationHostFunction = NativeSmoothClipModule.setClipPresentation;
 const beginInteractionHostFunction = NativeSmoothClipModule.beginInteraction;
-const animateTimingHostFunction = NativeSmoothClipModule.animateTiming;
-const animateSpringHostFunction = NativeSmoothClipModule.animateSpring;
-const animateKeyframesHostFunction = NativeSmoothClipModule.animateKeyframes;
+
+// The animate* host functions take one argument beyond the TurboModule spec:
+// the Reanimated-rule start stamp in milliseconds (see animateOnUI). Android's
+// JSI bindings read it as an optional trailing argument; the iOS TurboModule
+// reads its declared parameters positionally and ignores extras, so the
+// codegen spec stays untouched and both platforms take the same call. A
+// narrower function is assignable to the widened type, so no cast is needed.
+type WithStartStamp<F> = F extends (...args: infer A) => infer R
+  ? (...args: [...A, startedAtMs: number]) => R
+  : never;
+const animateTimingHostFunction: WithStartStamp<
+  typeof NativeSmoothClipModule.animateTiming
+> = NativeSmoothClipModule.animateTiming;
+const animateSpringHostFunction: WithStartStamp<
+  typeof NativeSmoothClipModule.animateSpring
+> = NativeSmoothClipModule.animateSpring;
+const animateKeyframesHostFunction: WithStartStamp<
+  typeof NativeSmoothClipModule.animateKeyframes
+> = NativeSmoothClipModule.animateKeyframes;
 const rejectAnimationHostFunction = NativeSmoothClipModule.rejectAnimation;
 const cancelAnimationHostFunction = NativeSmoothClipModule.cancelAnimation;
 const destroyDriverHostFunction = NativeSmoothClipModule.destroyDriver;
@@ -195,6 +211,14 @@ export function useSmoothClipDriver(
   // so animateTo must start from the native registry's latest value instead
   // of snapping back to the stale SharedValue.
   const scalarsStale = useSharedValue(0);
+  // Non-zero between the effect cleanup's native teardown and the next effect
+  // run. Native cannot tell "this driver was never seeded" from "this driver
+  // was destroyed and erased" — both are a missing registry entry — so the
+  // animation entry points would happily create a fresh state for a call that
+  // arrives after the hook is gone, leaving a latch that no view starts and no
+  // destroy cancels. Only the UI side knows the difference, so it is decided
+  // here.
+  const disposed = useSharedValue(0);
   const callbackRef = useRef(options.onAnimationComplete);
   const driverRef = useRef<SmoothClipDriver | null>(null);
   callbackRef.current = options.onAnimationComplete;
@@ -205,14 +229,21 @@ export function useSmoothClipDriver(
 
     const seedPresentation = (next: SmoothClipPresentation) => {
       'worklet';
-      if (!clipPresentationEquals(presentation.value, next)) {
-        suppressDeliveries.value += 1;
-        presentation.value = next;
-      }
+      if (clipPresentationEquals(presentation.value, next)) return;
+      suppressDeliveries.value += 1;
+      presentation.value = next;
+      // The listener runs synchronously inside that assignment, so the credit
+      // is either spent by now or was never spendable. deliver() returns before
+      // the decrement whenever the value dedupes against `last` — which happens
+      // exactly when native already holds it, e.g. freezing a latch back to the
+      // value it started from. An unspent credit would then swallow the next
+      // real declarative write and leave native a geometry behind for good.
+      if (suppressDeliveries.value > 0) suppressDeliveries.value -= 1;
     };
 
     const beginOnUI = (): SmoothClipPresentation => {
       'worklet';
+      if (disposed.value !== 0) return presentation.value;
       const current = presentationFromNative(
         beginInteractionHostFunction(driverId),
         presentation.value
@@ -226,7 +257,7 @@ export function useSmoothClipDriver(
 
     const setOnUI = (next: SmoothClipPresentation): void => {
       'worklet';
-      if (!isFiniteClipPresentation(next)) return;
+      if (disposed.value !== 0 || !isFiniteClipPresentation(next)) return;
       activeAnimationId.value = 0;
       ownership.value = INTERACTIVE;
       scalarsStale.value = 0;
@@ -240,7 +271,8 @@ export function useSmoothClipDriver(
         clip.radius,
         contentTranslateX,
         contentTranslateY,
-        true
+        true,
+        false
       );
       seedPresentation(next);
     };
@@ -252,10 +284,12 @@ export function useSmoothClipDriver(
       height: number,
       radius: number,
       contentTranslateX: number,
-      contentTranslateY: number
+      contentTranslateY: number,
+      overridePendingAnimation = false
     ): void => {
       'worklet';
       if (
+        disposed.value !== 0 ||
         !Number.isFinite(x) ||
         !Number.isFinite(y) ||
         !Number.isFinite(width) ||
@@ -278,7 +312,8 @@ export function useSmoothClipDriver(
         radius,
         contentTranslateX,
         contentTranslateY,
-        true
+        true,
+        overridePendingAnimation
       );
     };
 
@@ -293,6 +328,13 @@ export function useSmoothClipDriver(
       ) {
         return rejectAnimationHostFunction(driverId);
       }
+      // Past the hook's cleanup the native entry is gone for good, and an
+      // interactive start here would recreate it as a latch nothing can ever
+      // start or cancel. Reject before any side effect — not via
+      // rejectAnimation, which would mint an id and a completion for a driver
+      // whose JS state is already detached. This is the "unsupported dispatch"
+      // arm of the documented 0 contract.
+      if (disposed.value !== 0) return 0;
 
       const from = animation.from;
       if (from !== undefined) {
@@ -308,7 +350,8 @@ export function useSmoothClipDriver(
           from.clip.height,
           from.clip.radius,
           from.contentTranslateX,
-          from.contentTranslateY
+          from.contentTranslateY,
+          true
         );
       }
 
@@ -325,6 +368,26 @@ export function useSmoothClipDriver(
       scalarsStale.value = 0;
       const startClip = start.clip;
       const targetClip = target.clip;
+      // Reanimated stamps a parallel animation's t0 on this same runtime as
+      // `__frameTimestamp || _getAnimationTimestamp()` (valueSetter.ts).
+      // Capturing the identical value here and handing it to the integrator
+      // keeps clip and content phase-locked in every branch — including a
+      // start issued from CALLBACK_INPUT (batched gesture moves), where the
+      // dispatching frame's stamp is EARLIER than the call: the native min()
+      // anchor alone would adopt that frame stamp while Reanimated, outside
+      // its rAF flush where __frameTimestamp is cleared, keeps the wall
+      // clock — a lead lasting the whole animation. NaN when the globals are
+      // absent (tests, non-worklets runtimes): native then falls back to its
+      // own clock plus the min() anchor, the pre-stamp behavior.
+      const workletGlobal = globalThis as {
+        __frameTimestamp?: number;
+        _getAnimationTimestamp?: () => number;
+      };
+      const startedAtMs =
+        workletGlobal.__frameTimestamp ||
+        (typeof workletGlobal._getAnimationTimestamp === 'function'
+          ? workletGlobal._getAnimationTimestamp()
+          : Number.NaN);
       let animationId: number;
 
       if (animation.type === 'timing') {
@@ -351,7 +414,8 @@ export function useSmoothClipDriver(
           y1,
           x2,
           y2,
-          reduceMotion
+          reduceMotion,
+          startedAtMs
         );
       } else if (animation.type === 'spring') {
         const inheritVelocity =
@@ -379,7 +443,8 @@ export function useSmoothClipDriver(
           Math.max(0, animation.damping ?? 10),
           inheritVelocity ? 0 : (animation.initialVelocity as number),
           inheritVelocity,
-          reduceMotion
+          reduceMotion,
+          startedAtMs
         );
       } else {
         animationId = animateKeyframesHostFunction(
@@ -401,16 +466,17 @@ export function useSmoothClipDriver(
           target.contentTranslateY,
           Math.max(0, animation.duration),
           flattenedKeyframes(animation),
-          reduceMotion
+          reduceMotion,
+          startedAtMs
         );
       }
       if (animationId === 0) {
-        // The 0 sentinel: the driver entry no longer exists (destroyed) or
-        // the call ran off the main thread — validation failures never get
-        // here (they reject before any side effect with a fresh id and one
-        // finished:false completion). Restore the two-call-desugar state and
-        // forward the registry's rejection result, which is 0 again in both
-        // reachable cases, with no completion — exactly the README contract.
+        // The 0 sentinel: off-main, invalid-id, or otherwise unsupported
+        // dispatch. A missing driver is accepted when this call carries the
+        // authoritative interactive start above; a start-less missing-state
+        // request remains unsupported rather than inventing zero geometry.
+        // Validation failures never get here (they reject before any side
+        // effect with a fresh id and one finished:false completion).
         ownership.value = INTERACTIVE;
         presentation.value = start;
         if (scalarsWereStale) scalarsStale.value = 1;
@@ -426,6 +492,10 @@ export function useSmoothClipDriver(
       behavior: 'current' | 'target' = 'current'
     ): SmoothClipPresentation => {
       'worklet';
+      // Past the hook's cleanup the native entry is gone; the call would fail
+      // defined (handled=false) but it is the last driver.ui path that still
+      // crosses into native after the tombstone. Guard it like the rest.
+      if (disposed.value !== 0) return presentation.value;
       const values = cancelAnimationHostFunction(
         driverId,
         animationId,
@@ -591,9 +661,14 @@ export function useSmoothClipDriver(
         suppressed: SharedValue<number>,
         active: SharedValue<number>,
         stale: SharedValue<number>,
+        gone: SharedValue<number>,
         setter: typeof setPresentationHostFunction
       ) => {
         'worklet';
+        // First, before the listener or the seed: this effect run owns the
+        // driver again, so a StrictMode/<Activity> replay must clear the
+        // previous cleanup's tombstone or every later write would be rejected.
+        gone.value = 0;
         let last: SmoothClipPresentation | null = null;
         const deliver = (next: SmoothClipPresentation) => {
           if (
@@ -623,15 +698,19 @@ export function useSmoothClipDriver(
             clip.radius,
             contentTranslateX,
             contentTranslateY,
+            false,
             false
           );
         };
         source.addListener(listenerId, deliver);
         // Authoritative take-ownership seed. Creates the native entry before
-        // any view mounts on the first run, and revives a driver destroyed by
-        // an effect-replay cleanup (StrictMode/<Activity>) on later runs.
+        // any view mounts on the ordinary path, and revives a driver destroyed
+        // by an effect-replay cleanup (StrictMode/<Activity>) on later runs.
+        // An animation worklet can win the scheduling race and create a latch
+        // first; Native ownership then marks that intent as newer, so this
+        // passive seed must not clear its active id or replay the target value.
         const current = source.value;
-        if (isFiniteClipPresentation(current)) {
+        if (owner.value === INTERACTIVE && isFiniteClipPresentation(current)) {
           active.value = 0;
           owner.value = INTERACTIVE;
           stale.value = 0;
@@ -645,7 +724,8 @@ export function useSmoothClipDriver(
             current.clip.radius,
             current.contentTranslateX,
             current.contentTranslateY,
-            true
+            true,
+            false
           );
         }
       },
@@ -656,6 +736,7 @@ export function useSmoothClipDriver(
       suppressDeliveries,
       activeAnimationId,
       scalarsStale,
+      disposed,
       setPresentationHostFunction
     );
 
@@ -668,20 +749,46 @@ export function useSmoothClipDriver(
           source: SharedValue<SmoothClipPresentation>,
           listenerId: number,
           nativeDriverId: number,
+          owner: SharedValue<number>,
+          active: SharedValue<number>,
+          stale: SharedValue<number>,
+          suppressed: SharedValue<number>,
+          gone: SharedValue<number>,
           destroy: typeof destroyDriverHostFunction
         ) => {
           'worklet';
           source.removeListener(listenerId);
           destroy(nativeDriverId);
+          // StrictMode replays the effect with these same SharedValues. Reset
+          // the UI-side tombstone only after native teardown so the next setup
+          // can seed or animate without inheriting stale Native ownership.
+          active.value = 0;
+          owner.value = INTERACTIVE;
+          stale.value = 0;
+          // Defensive: seedPresentation now reclaims its own unspent credit at
+          // the point of issue, so this should already be 0. Kept because the
+          // failure mode — one declarative write silently dropped for the rest
+          // of the next hook's life — is invisible until someone reports a
+          // stale clip rect.
+          suppressed.value = 0;
+          // Last: the native entry is now erased, so until the next effect run
+          // clears this, any call that would recreate it is rejected instead.
+          gone.value = 1;
         },
         presentation,
         driverId,
         driverId,
+        ownership,
+        activeAnimationId,
+        scalarsStale,
+        suppressDeliveries,
+        disposed,
         destroyDriverHostFunction
       );
     };
   }, [
     activeAnimationId,
+    disposed,
     ownership,
     presentation,
     scalarsStale,