react-native-reanimated 4.3.0 → 4.3.2

package/src/createAnimatedComponent/getViewInfo.ts

@@ -20,7 +20,9 @@ export function getViewInfo(element: HostInstance): {
   viewTag?: number;
 } {
   return {
-    reactViewName: (element?._viewConfig?.uiViewClassName ??
+    reactViewName: (element?.__viewConfig?.uiViewClassName ??
+      // ReactFabricHostComponent (e.g. react-native-macos) exposes `_viewConfig`.
+      element?._viewConfig?.uiViewClassName ??
       element?.__internalInstanceHandle?.type ??
       element?.__internalInstanceHandle?.elementType) as string,
     viewTag: element?.__nativeTag,

package/src/css/component/AnimatedComponent.tsx

@@ -45,7 +45,6 @@ export default class AnimatedComponent<
   _viewInfo?: ViewInfo;
   _cssStyle: CSSStyle = {}; // RN style object with Reanimated CSS properties
   _componentRef: AnimatedComponentRef | HTMLElement | null = null;
-  _hasAnimatedRef = false;
   // Used only on web
   _componentDOMRef: HTMLElement | null = null;
   _willUnmount: boolean = false;
@@ -136,7 +135,6 @@ export default class AnimatedComponent<
     // Component can specify ref which should be animated when animated version of the component is created.
     // Otherwise, we animate the component itself.
     if (componentRef && componentRef.getAnimatableRef) {
-      this._hasAnimatedRef = true;
       return componentRef.getAnimatableRef();
     }
     // Case for SVG components on Web

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

@@ -1,5 +1,9 @@
 'use strict';
-import { getCompoundComponentName, getPropsBuilder } from '../../../common';
+import {
+  getCompoundComponentName,
+  getPropsBuilder,
+  IS_ANDROID,
+} from '../../../common';
 import type { ShadowNodeWrapper } from '../../../commonTypes';
 import type { ViewInfo } from '../../../createAnimatedComponent/commonTypes';
 import type { CSSStyle } from '../../types';
@@ -14,6 +18,13 @@ export default class CSSManager implements ICSSManager {
   private readonly cssTransitionsManager: CSSTransitionsManager;
   private readonly viewTag: number;
   private readonly propsBuilder: ReturnType<typeof getPropsBuilder>;
+  /**
+   * True if the previous update had CSS transition props attached. On the next
+   * update we still need to build `normalizedStyle` only on Android to revert
+   * props applied during the transition to correct current values. (fixes
+   * https://github.com/software-mansion/react-native-reanimated/issues/9218).
+   */
+  private hadTransitionLastUpdate = false;
 
   constructor(
     { shadowNodeWrapper, viewTag, reactViewName = 'RCTView' }: ViewInfo,
@@ -40,23 +51,33 @@ export default class CSSManager implements ICSSManager {
     const [animationProperties, transitionProperties, filteredStyle] =
       filterCSSAndStyleProperties(style);
 
-    const hasAnimationOrTransition =
-      animationProperties !== null || transitionProperties !== null;
-    const normalizedStyle = hasAnimationOrTransition
-      ? this.propsBuilder.build(filteredStyle)
-      : undefined;
+    const hasAnimation = animationProperties !== null;
+    const hasTransition = transitionProperties !== null;
 
-    // We need to update view style only for animations (e.g. when a property is
-    // specified only in a subset of keyframes and start/end value comes from style).
-    if (normalizedStyle && animationProperties) {
-      setViewStyle(this.viewTag, normalizedStyle);
-    }
+    const normalizedStyle =
+      hasAnimation ||
+      hasTransition ||
+      (IS_ANDROID && this.hadTransitionLastUpdate)
+        ? this.propsBuilder.build(filteredStyle)
+        : undefined;
 
-    this.cssTransitionsManager.update(
+    const transitionDetached = this.cssTransitionsManager.update(
       transitionProperties,
       normalizedStyle ?? {}
     );
+
+    // Record the committed style as the base so animations and (on Android) a
+    // detaching transition can revert to it instead of interpolator defaults.
+    if (
+      normalizedStyle &&
+      (hasAnimation || (IS_ANDROID && transitionDetached))
+    ) {
+      setViewStyle(this.viewTag, normalizedStyle);
+    }
+
     this.cssAnimationsManager.update(animationProperties);
+
+    this.hadTransitionLastUpdate = hasTransition;
   }
 
   unmountCleanup(): void {

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

@@ -19,18 +19,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 ReanimatedError(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/css/utils/props.ts

@@ -27,6 +27,13 @@ export function filterCSSAndStyleProperties<S extends AnyRecord>(
   const filteredStyle: AnyRecord = {};
 
   for (const [prop, value] of Object.entries(style)) {
+    if (value === undefined) {
+      // If the user explicitly sets a property to undefined (e.g. when they want
+      // to remove CSS transition or animation), we treat the property as if it was not
+      // present in the style object.
+      continue;
+    }
+
     if (isAnimationProp(prop)) {
       // TODO - add support for animation shorthand
       animationProperties[prop] = value;

package/src/hook/useAnimatedRef.ts

@@ -37,8 +37,8 @@ function useAnimatedRefBase<TRef extends InstanceOrElement>(
         wrapperRef.current = getWrapper(ref);
 
         // We have to unwrap the tag from the shadow node wrapper.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        fun.getTag = () => findNodeHandle(ref as any);
+        // @ts-expect-error this can't be typed well.
+        fun.getTag = () => ref.getScrollableNode?.() || findNodeHandle(ref);
         fun.current = ref;
 
         if (observers.size) {

package/src/mutables.ts

@@ -217,8 +217,12 @@ function mutableGuestDecorator<TValue>(
       set(newValue) {
         if (globalThis.__RUNTIME_KIND === 1) {
           checkInvalidWriteDuringRender();
+          scheduleOnUI(() => {
+            mutable.value = newValue;
+          });
+        } else {
+          mutable.setAsync(newValue);
         }
-        mutable.setAsync(newValue);
       },
       enumerable: true,
       configurable: true,

package/src/platform-specific/findHostInstance.ts

@@ -13,7 +13,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;
   }
@@ -54,13 +56,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.3.0';
+export const jsVersion = '4.3.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

@@ -109,7 +109,7 @@ type NativePropsOperation = {
 function createUpdatePropsManager() {
   'worklet';
   const nativeOperations: NativePropsOperation[] = [];
-  const jsOperations: JSPropsOperation[] = [];
+  let jsOperations: JSPropsOperation[] = [];
 
   let flushPending = false;
 
@@ -162,8 +162,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;
     },

package/src/valueSetter.ts

@@ -17,7 +17,8 @@ export function valueSetter<Value>(
     (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'