react-native-reanimated 4.3.0-rc.0 → 4.3.1

package/src/common/style/processors/transformOrigin.ts

@@ -1,7 +1,10 @@
 'use strict';
-'worklet';
 import { ReanimatedError } from '../../errors';
-import type { TransformOrigin, ValueProcessor } from '../../types';
+import type {
+  NormalizedTransformOrigin,
+  TransformOrigin,
+  ValueProcessor,
+} from '../../types';
 
 type Axis = 'x' | 'y' | 'z';
 type ConvertedValue = `${number}%` | number;
@@ -21,6 +24,7 @@ const VERTICAL_CONVERSIONS = {
 } satisfies KeywordConversions;
 
 function getAllowedValues(axis: Axis, isArray: boolean): string {
+  'worklet';
   const allowed: string[] = [];
 
   if (isArray) {
@@ -51,20 +55,25 @@ function getAllowedValues(axis: Axis, isArray: boolean): string {
 }
 
 export const ERROR_MESSAGES = {
-  invalidTransformOrigin: (value: Readonly<TransformOrigin>) =>
-    `Invalid transformOrigin: ${JSON.stringify(value)}. Expected 1-3 values.`,
+  invalidTransformOrigin: (value: Readonly<TransformOrigin>) => {
+    'worklet';
+    return `Invalid transformOrigin: ${JSON.stringify(value)}. Expected 1-3 values.`;
+  },
   invalidValue: (
     value: string | number,
     axis: Axis,
     origin: Readonly<TransformOrigin>,
     isArray: boolean
-  ) =>
-    `Invalid value "${value}" for the ${axis}-axis in transformOrigin ${JSON.stringify(
+  ) => {
+    'worklet';
+    return `Invalid value "${value}" for the ${axis}-axis in transformOrigin ${JSON.stringify(
       origin
-    )}. Allowed values: ${getAllowedValues(axis, isArray)}.`,
+    )}. Allowed values: ${getAllowedValues(axis, isArray)}.`;
+  },
 };
 
 function maybeSwapComponents(components: ReadonlyArray<string | number>) {
+  'worklet';
   if (
     components[0] in VERTICAL_CONVERSIONS &&
     (components[1] === undefined || components[1] in HORIZONTAL_CONVERSIONS)
@@ -77,13 +86,30 @@ function maybeSwapComponents(components: ReadonlyArray<string | number>) {
   return components;
 }
 
+function parseValue(
+  value: string | number,
+  allowPercentages: true,
+  customParse: CustomParse,
+  getError: () => string,
+  keywordConversions?: KeywordConversions
+): `${number}%` | number;
+
+function parseValue(
+  value: string | number,
+  allowPercentages: false,
+  customParse: CustomParse,
+  getError: () => string,
+  keywordConversions?: KeywordConversions
+): number;
+
 function parseValue(
   value: string | number,
   allowPercentages: boolean,
   customParse: CustomParse,
   getError: () => string,
   keywordConversions?: KeywordConversions
-) {
+): `${number}%` | number {
+  'worklet';
   if (typeof value === 'number') {
     return value;
   }
@@ -109,6 +135,7 @@ function parseValue(
 }
 
 function parsePx(component: string) {
+  'worklet';
   if (component.endsWith('px') || component === '0') {
     const num = parseFloat(component);
     if (!isNaN(num)) {
@@ -118,9 +145,11 @@ function parsePx(component: string) {
   return null;
 }
 
-export const processTransformOrigin: ValueProcessor<TransformOrigin> = (
-  value
-) => {
+export const processTransformOrigin: ValueProcessor<
+  TransformOrigin,
+  NormalizedTransformOrigin
+> = (value) => {
+  'worklet';
   const isArray = Array.isArray(value);
   let components = typeof value === 'string' ? value.split(/\s+/) : value;
   const customParse = isArray ? () => null : parsePx;

package/src/common/utils/guards.ts

@@ -1,5 +1,4 @@
 'use strict';
-'worklet';
 import type { AnyRecord, ConfigPropertyAlias, UnknownRecord } from '../types';
 
 export const isDefined = <T>(value: T): value is NonNullable<T> =>
@@ -7,31 +6,37 @@ export const isDefined = <T>(value: T): value is NonNullable<T> =>
 
 export const isAngle = (
   value: string | number
-): value is `${number}deg` | `${number}rad` =>
-  typeof value === 'string' && /^-?\d+(\.\d+)?(deg|rad)$/.test(value);
+): value is `${number}deg` | `${number}rad` => {
+  'worklet';
+  return typeof value === 'string' && /^-?\d+(\.\d+)?(deg|rad)$/.test(value);
+};
 
-export const isNumber = (value: unknown): value is number =>
-  typeof value === 'number' && !isNaN(value);
+export const isNumber = (value: unknown): value is number => {
+  'worklet';
+  return typeof value === 'number' && !isNaN(value);
+};
 
-export const isNumberArray = (value: unknown): value is number[] =>
-  Array.isArray(value) && value.every(isNumber);
+export const isNumberArray = (value: unknown): value is number[] => {
+  'worklet';
+  return Array.isArray(value) && value.every(isNumber);
+};
 
 export const isLength = (value: string) => {
+  'worklet';
   return value.endsWith('px') || !isNaN(Number(value));
 };
 
-export const isPercentage = (value: unknown): value is `${number}%` =>
-  typeof value === 'string' && /^-?\d+(\.\d+)?%$/.test(value);
+export const isPercentage = (value: unknown): value is `${number}%` => {
+  'worklet';
+  return typeof value === 'string' && /^-?\d+(\.\d+)?%$/.test(value);
+};
 
 export const isRecord = <T extends UnknownRecord = UnknownRecord>(
   value: unknown
-): value is T =>
-  typeof value === 'object' && value !== null && !Array.isArray(value);
-
-export const hasProp = <P extends AnyRecord, K extends string>(
-  obj: P,
-  key: K
-): obj is P & Record<K, string> => key in obj;
+): value is T => {
+  'worklet';
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
 
 export const isConfigPropertyAlias = <P extends AnyRecord>(
   value: unknown

package/src/common/utils/parsers.ts

@@ -1,5 +1,4 @@
 'use strict';
-'worklet';
 import type { BoxShadowValue } from 'react-native';
 
 import { isLength } from '../utils/guards';
@@ -15,6 +14,7 @@ const SHADOW_PARTS_REGEX = /(?:[^\s()]+|\([^()]*\))+/g;
 const SHADOW_SPLIT_REGEX = /(?:[^,()]+|\([^)]*\))+(?=\s*,|$)/g;
 
 export function parseBoxShadowString(value: string) {
+  'worklet';
   if (value === 'none') {
     return [];
   }

package/src/commonTypes.ts

@@ -374,7 +374,7 @@ export type ShadowNodeWrapper = {
 
 export type SettledUpdate = {
   viewTag: number;
-  styleProps: StyleProps;
+  styleProps: StyleProps | null;
 };
 
 export enum KeyboardState {

package/src/createAnimatedComponent/AnimatedComponent.tsx

@@ -3,7 +3,6 @@ import '../layoutReanimation/animationsManager';
 
 import type React from 'react';
 import { Fragment } from 'react';
-import { StyleSheet } from 'react-native';
 
 import { checkStyleOverwriting, maybeBuild } from '../animationBuilder';
 import { IS_JEST, IS_WEB, logger } from '../common';
@@ -536,16 +535,11 @@ export default class AnimatedComponent
     }
 
     if (FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS) {
-      const flatStyles = StyleSheet.flatten(filteredProps.style as object);
-      const mergedStyles = {
-        ...flatStyles,
-        ...this.state.settledProps,
-      };
       return super.render({
         nativeID,
         ...filteredProps,
         ...this.state.settledProps,
-        style: mergedStyles,
+        style: [...flattenArray(filteredProps.style), this.state.settledProps],
         ...jestProps,
       });
     }

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,7 +18,13 @@ export default class CSSManager implements ICSSManager {
   private readonly cssTransitionsManager: CSSTransitionsManager;
   private readonly viewTag: number;
   private readonly propsBuilder: ReturnType<typeof getPropsBuilder>;
-  private isFirstUpdate: boolean = true;
+  /**
+   * 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,
@@ -41,11 +51,23 @@ export default class CSSManager implements ICSSManager {
     const [animationProperties, transitionProperties, filteredStyle] =
       filterCSSAndStyleProperties(style);
 
-    const normalizedStyle = this.propsBuilder.build(filteredStyle);
+    const hasAnimation = animationProperties !== null;
+    const hasTransition = transitionProperties !== null;
 
-    // If the update is called during the first css style update, we won't
-    // trigger CSS transitions and set styles before attaching CSS transitions
-    if (this.isFirstUpdate && normalizedStyle) {
+    const normalizedStyle =
+      hasAnimation ||
+      hasTransition ||
+      (IS_ANDROID && this.hadTransitionLastUpdate)
+        ? this.propsBuilder.build(filteredStyle)
+        : undefined;
+
+    if (
+      normalizedStyle &&
+      (hasAnimation ||
+        // We also need to update the current style on Android when the
+        // transition is detached.
+        (IS_ANDROID && !hasTransition && this.hadTransitionLastUpdate))
+    ) {
       setViewStyle(this.viewTag, normalizedStyle);
     }
 
@@ -55,14 +77,7 @@ export default class CSSManager implements ICSSManager {
     );
     this.cssAnimationsManager.update(animationProperties);
 
-    // If the current update is not the fist one, we want to update CSS
-    // animations and transitions first and update the style then to make
-    // sure that the new transition is fired with new settings (like duration)
-    if (!this.isFirstUpdate && normalizedStyle) {
-      setViewStyle(this.viewTag, normalizedStyle);
-    }
-
-    this.isFirstUpdate = false;
+    this.hadTransitionLastUpdate = hasTransition;
   }
 
   unmountCleanup(): void {

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

@@ -17,7 +17,13 @@ export default class CSSTransitionsManager implements ICSSTransitionsManager {
   private readonly viewTag: number;
   private readonly shadowNodeWrapper: ShadowNodeWrapper;
 
-  private lastAppliedProps: UnknownRecord | null = null;
+  // All props from the previous update
+  private prevProps: UnknownRecord | null = null;
+  // Stores all properties for which transition was triggered before
+  // and which haven't been cleaned up yet (null if no transition was attached before)
+  private propsWithTransitions = new Set<string>();
+  // Indicates whether a CSS transition is currently attached to the view
+  private hasTransition = false;
 
   constructor(shadowNodeWrapper: ShadowNodeWrapper, viewTag: number) {
     this.viewTag = viewTag;
@@ -26,38 +32,27 @@ export default class CSSTransitionsManager implements ICSSTransitionsManager {
 
   update(
     transitionProperties: CSSTransitionProperties | null,
-    props: UnknownRecord = {}
+    nextProps: UnknownRecord = {}
   ): void {
     const transitionConfig =
       transitionProperties &&
       normalizeCSSTransitionProperties(transitionProperties);
 
-    if (!transitionConfig) {
-      this.detach();
-      return;
-    }
+    const prevProps = this.prevProps;
+    this.prevProps = nextProps;
 
-    const prevProps = this.lastAppliedProps; // Active props from last update
-    const nextProps: UnknownRecord = {}; // Active props from this update
-
-    // Filter new props based on the new transition config
-    if (!transitionConfig.properties) {
-      Object.assign(nextProps, props);
-    } else {
-      for (const property of transitionConfig.properties) {
-        if (property in props) {
-          nextProps[property] = props[property];
-        }
+    // If there were no previous props, the view is just mounted so we
+    // don't trigger any transitions yet. Also, when there is no transition
+    // config, we don't trigger any transitions.
+    if (!prevProps || !transitionConfig) {
+      if (this.hasTransition) {
+        this.detach();
       }
-    }
-
-    this.lastAppliedProps = nextProps;
-
-    if (!prevProps) {
       return;
     }
 
-    const config = this.buildTransitionConfig(
+    // Trigger transition for changed properties only
+    const config = this.processTransitionConfig(
       prevProps,
       nextProps,
       transitionConfig
@@ -65,6 +60,7 @@ export default class CSSTransitionsManager implements ICSSTransitionsManager {
 
     if (Object.keys(config).length) {
       runCSSTransition(this.shadowNodeWrapper, config);
+      this.hasTransition = true;
     }
   }
 
@@ -73,57 +69,59 @@ export default class CSSTransitionsManager implements ICSSTransitionsManager {
   }
 
   private detach() {
-    if (this.lastAppliedProps) {
-      unregisterCSSTransition(this.viewTag);
-      this.lastAppliedProps = null;
-    }
+    unregisterCSSTransition(this.viewTag);
+    this.propsWithTransitions.clear();
+    this.hasTransition = false;
   }
 
-  private buildTransitionConfig(
+  private processTransitionConfig(
     oldProps: UnknownRecord,
     newProps: UnknownRecord,
     newTransitionConfig: NormalizedCSSTransitionConfig
   ): CSSTransitionConfig {
     const result: CSSTransitionConfig = {};
 
-    const newTransitionProperties = newTransitionConfig.properties;
-    const allowedProperties = !newTransitionProperties
-      ? null
-      : new Set(newTransitionProperties);
+    const specificProperties = newTransitionConfig.specificProperties;
+
+    const isAllowedProperty = (property: string) =>
+      !specificProperties || specificProperties.has(property);
+
+    const getPropertySettings = (property: string) =>
+      newTransitionConfig.settings[property] ??
+      newTransitionConfig.settings.all;
+
+    const triggerTransition = (property: string) => {
+      result[property] = {
+        ...getPropertySettings(property),
+        value: [oldProps[property], newProps[property]],
+      };
+      this.propsWithTransitions.add(property);
+    };
 
     // Get property changes which we want to trigger transitions for
     for (const key in newProps) {
-      const newValue = newProps[key];
-      const oldValue = oldProps[key];
-
-      if (!deepEqual(oldValue, newValue)) {
-        result[key] = {
-          ...this.getPropertySettings(key, newTransitionConfig),
-          value: [oldValue, newValue],
-        };
+      if (isAllowedProperty(key) && !deepEqual(newProps[key], oldProps[key])) {
+        triggerTransition(key);
       }
     }
 
-    // Clear up old properties that are no longer allowed
+    // Handle old props; for no longer allowed ones, cancel the transition
+    // immediately; for ones that are allowed but were removed, trigger a transition
+    // to undefined (to the default value for the property).
     for (const key in oldProps) {
-      if (allowedProperties && !allowedProperties.has(key)) {
-        result[key] = null;
+      if (!isAllowedProperty(key)) {
+        if (this.propsWithTransitions.has(key)) {
+          // If a property was transitioned before but is no longer allowed,
+          // we need to clear it up immediately
+          result[key] = null;
+          this.propsWithTransitions.delete(key);
+        }
       } else if (!(key in newProps)) {
         // Property was removed from props but is still allowed
-        result[key] = {
-          ...this.getPropertySettings(key, newTransitionConfig),
-          value: [oldProps[key], undefined],
-        };
+        triggerTransition(key);
       }
     }
 
     return result;
   }
-
-  private getPropertySettings(
-    property: string,
-    config: NormalizedCSSTransitionConfig
-  ) {
-    return config.settings[property] ?? config.settings.all;
-  }
 }

package/src/css/native/normalization/transition/config.ts

@@ -79,9 +79,10 @@ export function normalizeCSSTransitionProperties(
     transitionDelay,
     transitionBehavior,
   } = expandedProperties;
-  const specificProperties: string[] = [];
   let allPropertiesTransition = false;
   const settings: Record<string, NormalizedSingleCSSTransitionSettings> = {};
+  const specificProperties = new Set<string>();
+  const processedProperties = new Set<string>();
 
   if (!transitionProperty.length) {
     // For cases when transition property hasn't been explicitly specified
@@ -95,42 +96,49 @@ export function normalizeCSSTransitionProperties(
   // occurrence and ignore remaining ones)
   for (let i = transitionProperty.length - 1; i >= 0; i--) {
     const property = transitionProperty[i];
-    // Continue if there was a prop with the same name specified later
-    // (we don't want to override the last occurrence of the property)
-    if (settings?.[property]) {
+    // We always respect the last occurrence of a property, even if it gets
+    // pruned as inactive. That means earlier occurrences must be ignored.
+    if (processedProperties.has(property)) {
       continue;
     }
+    processedProperties.add(property);
 
-    if (property === 'all') {
-      allPropertiesTransition = true;
-    } else {
-      specificProperties.push(property);
+    const duration = normalizeDuration(
+      transitionDuration[i % transitionDuration.length]
+    );
+    const delay = normalizeDelay(transitionDelay[i % transitionDelay.length]);
+
+    // Skip if effective duration is 0 (the transition would be immediate so there is no need
+    // to apply it and we can just treat it as a plain render without a transition)
+    if (duration + delay <= 0) {
+      continue;
     }
 
-    settings[property] = {
-      duration: normalizeDuration(
-        transitionDuration[i % transitionDuration.length]
-      ),
-      timingFunction: normalizeTimingFunction(
-        transitionTimingFunction[i % transitionTimingFunction.length]
-      ),
-      delay: normalizeDelay(transitionDelay[i % transitionDelay.length]),
-      allowDiscrete: normalizeTransitionBehavior(
-        transitionBehavior[i % transitionBehavior.length]
-      ),
-    };
+    const timingFunction = normalizeTimingFunction(
+      transitionTimingFunction[i % transitionTimingFunction.length]
+    );
+    const allowDiscrete = normalizeTransitionBehavior(
+      transitionBehavior[i % transitionBehavior.length]
+    );
+
+    settings[property] = { duration, timingFunction, delay, allowDiscrete };
 
     // 'all' transition property overrides all properties before it,
     // so we don't need to process them
-    if (allPropertiesTransition) {
+    if (property === 'all') {
+      allPropertiesTransition = true;
       break;
     }
+
+    specificProperties.add(property);
+  }
+
+  if (allPropertiesTransition) {
+    return { specificProperties: undefined, settings };
+  }
+  if (specificProperties.size) {
+    return { specificProperties, settings };
   }
 
-  return {
-    properties: allPropertiesTransition
-      ? undefined
-      : specificProperties.reverse(),
-    settings,
-  };
+  return null;
 }

package/src/css/native/types/transition.ts

@@ -13,7 +13,21 @@ export type CSSTransitionConfig = Record<
   (NormalizedSingleCSSTransitionSettings & { value: [unknown, unknown] }) | null
 >;
 
+/**
+ * `specificProperties`
+ *
+ * - `undefined`: accept all props (equivalent to `transition-property: all`)
+ * - `Set<string>`: accept only props present in the set
+ *
+ * `settings`
+ *
+ * - Keys are prop names, plus an optional `all` fallback key
+ * - How to read it for a prop `propName`:
+ *
+ *   - Primary: `settings[propName]` (if present)
+ *   - Fallback: `settings.all` (otherwise)
+ */
 export type NormalizedCSSTransitionConfig = {
-  properties: string[] | undefined;
+  specificProperties: Set<string> | undefined;
   settings: Record<string, NormalizedSingleCSSTransitionSettings>;
 };

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/featureFlags/index.ts

@@ -80,7 +80,7 @@ const DefaultStaticFeatureFlags = {
   USE_SYNCHRONIZABLE_FOR_MUTABLES: true,
   USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS: true,
   ENABLE_SHARED_ELEMENT_TRANSITIONS: false,
-  FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS: false,
+  FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS: true,
 } as const satisfies typeof StaticFeatureFlagsJSON;
 
 type StaticFeatureFlagsSchema = {

package/src/featureFlags/staticFlags.json

@@ -7,5 +7,5 @@
   "USE_SYNCHRONIZABLE_FOR_MUTABLES": true,
   "USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS": true,
   "ENABLE_SHARED_ELEMENT_TRANSITIONS": false,
-  "FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS": false
+  "FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS": true
 }

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/hook/useAnimatedStyle.ts

@@ -30,12 +30,7 @@ import type {
   JestAnimatedStyleHandle,
 } from './commonTypes';
 import { useSharedValue } from './useSharedValue';
-import {
-  buildWorkletsHash,
-  isAnimated,
-  shallowEqual,
-  validateAnimatedStyles,
-} from './utils';
+import { isAnimated, shallowEqual, validateAnimatedStyles } from './utils';
 
 interface AnimatedState {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -450,6 +445,20 @@ function checkSharedValueUsage(
   }
 }
 
+// Builds one big hash from multiple worklets' hashes.
+function buildWorkletsHash<Args extends unknown[], ReturnValue>(
+  worklets:
+    | Record<string, WorkletFunction<Args, ReturnValue>>
+    | WorkletFunction<Args, ReturnValue>[]
+) {
+  // For arrays `Object.values` returns the array itself.
+  return Object.values(worklets).reduce(
+    (acc, worklet: WorkletFunction<Args, ReturnValue>) =>
+      acc + worklet.__workletHash.toString(),
+    ''
+  );
+}
+
 /**
  * Lets you create a styles object, similar to StyleSheet styles, which can be
  * animated using shared values.