react-native-reanimated 4.4.1 → 4.4.2

package/src/css/native/managers/CSSTransitionsManager.ts

@@ -30,10 +30,14 @@ export default class CSSTransitionsManager implements ICSSTransitionsManager {
     this.shadowNodeWrapper = shadowNodeWrapper;
   }
 
+  /**
+   * @returns Whether this update detached a running transition (its props were
+   *   removed, or normalized to an empty config, e.g. when duration is 0).
+   */
   update(
     transitionProperties: CSSTransitionProperties | null,
     nextProps: UnknownRecord = {}
-  ): void {
+  ): boolean {
     const transitionConfig =
       transitionProperties &&
       normalizeCSSTransitionProperties(transitionProperties);
@@ -47,8 +51,9 @@ export default class CSSTransitionsManager implements ICSSTransitionsManager {
     if (!prevProps || !transitionConfig) {
       if (this.hasTransition) {
         this.detach();
+        return true;
       }
-      return;
+      return false;
     }
 
     // Trigger transition for changed properties only
@@ -62,6 +67,8 @@ export default class CSSTransitionsManager implements ICSSTransitionsManager {
       runCSSTransition(this.shadowNodeWrapper, config);
       this.hasTransition = true;
     }
+
+    return false;
   }
 
   unmountCleanup(): void {

package/src/css/svg/native/processors/stroke.ts

@@ -18,18 +18,21 @@ export const processStrokeDashArray: ValueProcessor<
   if (isLength(value)) {
     result = [value];
   } else if (Array.isArray(value)) {
-    // We have to repeat the same pattern twice if the number of elements is odd
-    // "If the number of values is odd, the pattern behaves as if it was duplicated
-    // to yield an even number of values"
-    // (https://www.w3.org/TR/fill-stroke-3/#valdef-stroke-dasharray-length-percentage)
-    result =
-      value.length % 2 === 0 || value.length < 3 ? value : value.concat(value);
+    result = [...value];
   } else if (value === 'none') {
     return 'none';
   } else {
     throw new Error(`[Reanimated] ${ERROR_MESSAGES.invalidDashArray(value)}`);
   }
 
+  // Per the SVG spec an odd-length dash array is repeated to an even length.
+  // react-native-svg's extractStroke does this, but animated values bypass it
+  // and an odd-length array crashes Android's DashPathEffect, so we repeat here.
+  // https://www.w3.org/TR/fill-stroke-3/#valdef-stroke-dasharray-length-percentage
+  if (result.length % 2 === 1) {
+    result = result.concat(result);
+  }
+
   if (__DEV__) {
     isValidDashArray(result);
   }

package/src/layoutReanimation/animationBuilder/ComplexAnimationBuilder.ts

@@ -12,9 +12,12 @@ import type { EasingFunctionFactory } from '../../Easing';
 import { BaseAnimationBuilder } from './BaseAnimationBuilder';
 
 /**
- * `this` type for static methods on {@link AnimationConfigBuilder}. Represents a
- * subclass constructor exposing the shared config-only static API inherited
- * from {@link BaseAnimationBuilder}.
+ * `this` constraint for static modifiers on {@link AnimationConfigBuilder}.
+ * Represents a subclass constructor exposing the shared config-only static API
+ * inherited from {@link BaseAnimationBuilder}. The modifiers bind `this` to a
+ * concrete subtype of this so the chain preserves the receiver's instance type
+ * (e.g. `SharedTransition.springify(...)` stays a `SharedTransition`) instead
+ * of collapsing to `AnimationConfigBuilder`.
  */
 type AnimationConfigBuilderClass = typeof BaseAnimationBuilder &
   (new () => AnimationConfigBuilder);
@@ -41,10 +44,10 @@ export class AnimationConfigBuilder extends BaseAnimationBuilder {
    * @param easingFunction - An easing function which defines the animation
    *   curve.
    */
-  static easing(
-    this: AnimationConfigBuilderClass,
+  static easing<T extends AnimationConfigBuilderClass>(
+    this: T,
     easingFunction: EasingFunction | EasingFunctionFactory
-  ): AnimationConfigBuilder {
+  ): InstanceType<T> {
     const instance = this.createInstance();
     return instance.easing(easingFunction);
   }
@@ -64,10 +67,10 @@ export class AnimationConfigBuilder extends BaseAnimationBuilder {
    *
    * @param degree - The rotation degree.
    */
-  static rotate(
-    this: AnimationConfigBuilderClass,
+  static rotate<T extends AnimationConfigBuilderClass>(
+    this: T,
     degree: string
-  ): AnimationConfigBuilder {
+  ): InstanceType<T> {
     const instance = this.createInstance();
     return instance.rotate(degree);
   }
@@ -85,10 +88,10 @@ export class AnimationConfigBuilder extends BaseAnimationBuilder {
    * @param duration - An optional duration of the spring animation (in
    *   milliseconds).
    */
-  static springify(
-    this: AnimationConfigBuilderClass,
+  static springify<T extends AnimationConfigBuilderClass>(
+    this: T,
     duration?: number
-  ): AnimationConfigBuilder {
+  ): InstanceType<T> {
     const instance = this.createInstance();
     return instance.springify(duration);
   }
@@ -106,10 +109,10 @@ export class AnimationConfigBuilder extends BaseAnimationBuilder {
    *
    * @param dampingRatio - How damped the spring is.
    */
-  static dampingRatio(
-    this: AnimationConfigBuilderClass,
+  static dampingRatio<T extends AnimationConfigBuilderClass>(
+    this: T,
     dampingRatio: number
-  ): AnimationConfigBuilder {
+  ): InstanceType<T> {
     const instance = this.createInstance();
     return instance.dampingRatio(dampingRatio);
   }
@@ -127,10 +130,10 @@ export class AnimationConfigBuilder extends BaseAnimationBuilder {
    * @param value - Decides how quickly a spring stops moving. Higher damping
    *   means the spring will come to rest faster.
    */
-  static damping(
-    this: AnimationConfigBuilderClass,
+  static damping<T extends AnimationConfigBuilderClass>(
+    this: T,
     value: number
-  ): AnimationConfigBuilder {
+  ): InstanceType<T> {
     const instance = this.createInstance();
     return instance.damping(value);
   }
@@ -148,10 +151,10 @@ export class AnimationConfigBuilder extends BaseAnimationBuilder {
    * @param mass - The weight of the spring. Reducing this value makes the
    *   animation faster.
    */
-  static mass(
-    this: AnimationConfigBuilderClass,
+  static mass<T extends AnimationConfigBuilderClass>(
+    this: T,
     mass: number
-  ): AnimationConfigBuilder {
+  ): InstanceType<T> {
     const instance = this.createInstance();
     return instance.mass(mass);
   }
@@ -168,10 +171,10 @@ export class AnimationConfigBuilder extends BaseAnimationBuilder {
    *
    * @param stiffness - How bouncy the spring is.
    */
-  static stiffness(
-    this: AnimationConfigBuilderClass,
+  static stiffness<T extends AnimationConfigBuilderClass>(
+    this: T,
     stiffness: number
-  ): AnimationConfigBuilder {
+  ): InstanceType<T> {
     const instance = this.createInstance();
     return instance.stiffness(stiffness);
   }
@@ -189,10 +192,10 @@ export class AnimationConfigBuilder extends BaseAnimationBuilder {
    * @param overshootClamping - Whether a spring can bounce over the final
    *   position.
    */
-  static overshootClamping(
-    this: AnimationConfigBuilderClass,
+  static overshootClamping<T extends AnimationConfigBuilderClass>(
+    this: T,
     overshootClamping: number
-  ): AnimationConfigBuilder {
+  ): InstanceType<T> {
     const instance = this.createInstance();
     return instance.overshootClamping(overshootClamping);
   }
@@ -206,10 +209,10 @@ export class AnimationConfigBuilder extends BaseAnimationBuilder {
    * @deprecated Use {@link energyThreshold} instead. This method currently does
    *   nothing and will be removed in the upcoming major version.
    */
-  static restDisplacementThreshold(
-    this: AnimationConfigBuilderClass,
+  static restDisplacementThreshold<T extends AnimationConfigBuilderClass>(
+    this: T,
     _restDisplacementThreshold: number
-  ): AnimationConfigBuilder {
+  ): InstanceType<T> {
     return this.createInstance();
   }
 
@@ -225,10 +228,10 @@ export class AnimationConfigBuilder extends BaseAnimationBuilder {
    * @deprecated Use {@link energyThreshold} instead. This method currently does
    *   nothing and will be removed in a future version.
    */
-  static restSpeedThreshold(
-    this: AnimationConfigBuilderClass,
+  static restSpeedThreshold<T extends AnimationConfigBuilderClass>(
+    this: T,
     _restSpeedThreshold: number
-  ): AnimationConfigBuilder {
+  ): InstanceType<T> {
     return this.createInstance();
   }
 
@@ -248,10 +251,10 @@ export class AnimationConfigBuilder extends BaseAnimationBuilder {
    * @param energyThreshold - Relative energy threshold below which the spring
    *   will snap to `toValue` without further oscillations. Defaults to 6e-9.
    */
-  static energyThreshold(
-    this: AnimationConfigBuilderClass,
+  static energyThreshold<T extends AnimationConfigBuilderClass>(
+    this: T,
     energyThreshold: number
-  ): AnimationConfigBuilder {
+  ): InstanceType<T> {
     const instance = this.createInstance();
     return instance.energyThreshold(energyThreshold);
   }

package/src/layoutReanimation/animationsManager.ts

@@ -11,28 +11,35 @@ import type {
   SharedValue,
 } from '../commonTypes';
 import { LayoutAnimationType } from '../commonTypes';
+import { getStaticFeatureFlag } from '../featureFlags';
 import { makeMutableUI } from '../mutables';
 
 const TAG_OFFSET = 1e9;
 
+const USE_ANIMATION_BACKEND = getStaticFeatureFlag('USE_ANIMATION_BACKEND');
+
 function startObservingProgress(
   tag: number,
-  sharedValue: SharedValue<Record<string, unknown>>
+  sharedValue: SharedValue<Record<string, unknown>>,
+  scheduleFlush: () => void
 ): void {
   'worklet';
   sharedValue.addListener(tag + TAG_OFFSET, () => {
     global._notifyAboutProgress(tag, sharedValue.value);
+    scheduleFlush();
   });
 }
 
 function stopObservingProgress(
   tag: number,
   sharedValue: SharedValue<number>,
+  scheduleFlush: () => void,
   removeView = false
 ): void {
   'worklet';
   sharedValue.removeListener(tag + TAG_OFFSET);
   global._notifyAboutEnd(tag, removeView);
+  scheduleFlush();
 }
 
 function createLayoutAnimationManager(): {
@@ -43,6 +50,27 @@ function createLayoutAnimationManager(): {
   const currentAnimationForTag = new Map();
   const mutableValuesForTag = new Map();
 
+  // Flush layout-animation progress once per frame via the frame finalizer
+  // (after all `requestAnimationFrame` callbacks), reusing the same
+  // `_maybeFlushUIUpdatesQueue` path as animated-prop updates.
+  // This finalizer runs after the mapper run (which re-queues itself a frame
+  // ahead, so it sits earlier in the finalizer queue). When a mapper-driven
+  // animation is also active, its flush runs first and already commits the
+  // layout-animation updates too, so our `_maybeFlushUIUpdatesQueue` here is a
+  // no-op; when only layout animations run, this is the single flush.
+  // The backend drives its own flush from `runGrandCallback`, so this is non-backend only.
+  let flushRequested = false;
+  const scheduleFlush = () => {
+    if (USE_ANIMATION_BACKEND || flushRequested) {
+      return;
+    }
+    flushRequested = true;
+    globalThis.requestAnimationFrameFinalizer(() => {
+      flushRequested = false;
+      global._maybeFlushUIUpdatesQueue();
+    });
+  };
+
   return {
     start(
       tag: number,
@@ -70,7 +98,7 @@ function createLayoutAnimationManager(): {
         value = makeMutableUI(style.initialValues);
         mutableValuesForTag.set(tag, value);
       } else {
-        stopObservingProgress(tag, value);
+        stopObservingProgress(tag, value, scheduleFlush);
         value._value = style.initialValues;
       }
 
@@ -81,14 +109,14 @@ function createLayoutAnimationManager(): {
           currentAnimationForTag.delete(tag);
           mutableValuesForTag.delete(tag);
           const shouldRemoveView = type === LayoutAnimationType.EXITING;
-          stopObservingProgress(tag, value, shouldRemoveView);
+          stopObservingProgress(tag, value, scheduleFlush, shouldRemoveView);
         }
         if (style.callback) {
           style.callback(finished === undefined ? false : finished);
         }
       };
 
-      startObservingProgress(tag, value);
+      startObservingProgress(tag, value, scheduleFlush);
       value.value = animation;
     },
     stop(tag: number) {
@@ -96,7 +124,7 @@ function createLayoutAnimationManager(): {
       if (!value) {
         return;
       }
-      stopObservingProgress(tag, value);
+      stopObservingProgress(tag, value, scheduleFlush);
     },
   };
 }

package/src/mappers.ts

@@ -103,13 +103,13 @@ function createMapperRegistry() {
         updateMappersOrder();
       }
       if (isAnyMapperDirty) {
+        isAnyMapperDirty = false;
         for (const mapper of sortedMappers) {
           if (mapper.dirty) {
             mapper.dirty = false;
             mapper.worklet();
           }
         }
-        isAnyMapperDirty = false;
       }
     } finally {
       processingMappers = false;

package/src/platform-specific/findHostInstance.ts

@@ -12,7 +12,9 @@ function findHostInstanceFastPath(maybeNativeRef: HostInstance | undefined) {
   if (
     maybeNativeRef.__internalInstanceHandle &&
     maybeNativeRef.__nativeTag &&
-    maybeNativeRef._viewConfig
+    // ReactFabricHostComponent (e.g. react-native-macos) exposes `_viewConfig`;
+    // ReactNativeElement uses `__viewConfig`.
+    (maybeNativeRef.__viewConfig || maybeNativeRef._viewConfig)
   ) {
     return maybeNativeRef;
   }
@@ -55,13 +57,11 @@ export function findHostInstance(
   resolveFindHostInstance_DEPRECATED();
   /*
     The Fabric implementation of `findHostInstance_DEPRECATED` requires a React ref as an argument
-    rather than a native ref. If a component implements the `getAnimatableRef` method, it must use 
-    the ref provided by this method. It is the component's responsibility to ensure that this is 
-    a valid React ref.
+    rather than a native ref. Prefer the resolved component ref when available so components can
+    forward their ref to the host view that should be animated. Components that expose an animatable
+    ref via `getAnimatableRef` already have it resolved into `_componentRef`.
   */
   return findHostInstance_DEPRECATED(
-    (ref as IAnimatedComponentInternalBase)._hasAnimatedRef
-      ? (ref as IAnimatedComponentInternalBase)._componentRef
-      : ref
+    (ref as IAnimatedComponentInternalBase)._componentRef ?? ref
   );
 }

package/src/platform-specific/jsVersion.ts

@@ -4,4 +4,4 @@
  * version used to build the native part of the library in runtime. Remember to
  * keep this in sync with the version declared in `package.json`
  */
-export const jsVersion = '4.4.1';
+export const jsVersion = '4.4.2';

package/src/platform-specific/types.ts

@@ -3,5 +3,7 @@
 export type HostInstance = {
   __internalInstanceHandle?: Record<string, unknown>;
   __nativeTag?: number;
+  __viewConfig?: Record<string, unknown>;
+  // Legacy ReactFabricHostComponent key (e.g. react-native-macos).
   _viewConfig?: Record<string, unknown>;
 };

package/src/updateProps/updateProps.ts

@@ -112,7 +112,7 @@ type NativePropsOperation = {
 function createUpdatePropsManager() {
   'worklet';
   const nativeOperations: NativePropsOperation[] = [];
-  const jsOperations: JSPropsOperation[] = [];
+  let jsOperations: JSPropsOperation[] = [];
 
   let flushPending = false;
 
@@ -165,8 +165,9 @@ function createUpdatePropsManager() {
         nativeOperations.length = 0;
       }
       if (jsOperations.length) {
+        // Fresh array each flush: scheduleOnRN caches serialized args by identity.
         scheduleOnRN(updateJSProps, jsOperations);
-        jsOperations.length = 0;
+        jsOperations = [];
       }
       flushPending = false;
       if (!USE_ANIMATION_BACKEND) {

package/src/valueSetter.ts

@@ -9,15 +9,19 @@ export function valueSetter<Value>(
   'worklet';
   const previousAnimation = mutable._animation;
   if (previousAnimation) {
-    previousAnimation.cancelled = true;
     mutable._animation = null;
+    if (!previousAnimation.finished) {
+      previousAnimation.cancelled = true;
+      previousAnimation.callback?.(false);
+    }
   }
   if (
     typeof value === 'function' ||
     (value !== null &&
       typeof value === 'object' &&
       // TODO TYPESCRIPT fix this after fixing AnimationObject type
-      (value as unknown as AnimationObject).onFrame !== undefined)
+      (value as unknown as AnimationObject).onFrame !== undefined &&
+      (value as unknown as AnimationObject).onStart !== undefined)
   ) {
     const animation: AnimationObject<Value> =
       typeof value === 'function'
@@ -47,17 +51,13 @@ export function valueSetter<Value>(
 
     const step = (timestamp: number) => {
       if (animation.cancelled) {
-        animation.callback?.(false /* finished */);
         return;
       }
       const finished = animation.onFrame(animation, timestamp);
-      animation.finished = true;
       animation.timestamp = timestamp;
-      // TODO TYPESCRIPT
-      // For now I'll assume that `animation.current` is always defined
-      // but actually need to dive into animations to understand it
       mutable._value = animation.current!;
       if (finished) {
+        animation.finished = true;
         animation.callback?.(true /* finished */);
       } else {
         requestAnimationFrame(step);