react-native-reanimated 4.1.2 → 4.1.4

package/src/animation/spring/springUtils.ts

@@ -66,6 +66,25 @@ export function checkIfConfigIsValid(config: DefaultSpringConfig): boolean {
   return errorMessage === '';
 }
 
+export function safeMergeConfigs<TConfig extends object>(
+  defaults: TConfig,
+  userConfig?: Partial<TConfig>
+): TConfig {
+  'worklet';
+  if (!userConfig) {
+    return defaults;
+  }
+
+  const filtered = Object.fromEntries(
+    Object.entries(userConfig).filter(([, v]) => v !== undefined)
+  ) as Partial<TConfig>;
+
+  return {
+    ...defaults,
+    ...filtered,
+  };
+}
+
 function bisectRoot({
   min,
   max,

package/src/common/logger.ts

@@ -39,39 +39,46 @@ function logToConsole(data: LogData) {
   }
 }
 
-export const DEFAULT_LOGGER_CONFIG: LoggerConfigInternal = {
+const DEFAULT_LOGGER_CONFIG: LoggerConfigInternal = {
   logFunction: logToConsole,
   level: ReanimatedLogLevel.warn,
   strict: true,
 };
 
 /**
- * Registers the logger configuration. use it only for Worklet runtimes.
+ * Current logger config getter.
  *
- * @param config - The config to register.
+ * @returns The current logger configuration object.
  */
-export function registerLoggerConfig(config: LoggerConfigInternal) {
+export function getLoggerConfig() {
   'worklet';
-  global.__reanimatedLoggerConfig = config;
+  if (!global.__reanimatedLoggerConfig) {
+    global.__reanimatedLoggerConfig = DEFAULT_LOGGER_CONFIG;
+  }
+  return global.__reanimatedLoggerConfig;
 }
 
 /**
  * Updates logger configuration.
  *
+ * @param currentConfig - The current logger configuration object.
  * @param options - The new logger configuration to apply.
  *
  *   - Level: The minimum log level to display.
  *   - Strict: Whether to log warnings and errors that are not strict. Defaults to
  *       false.
  */
-export function updateLoggerConfig(options?: Partial<LoggerConfig>) {
+export function updateLoggerConfig(
+  currentConfig: LoggerConfigInternal,
+  options?: Partial<LoggerConfig>
+) {
   'worklet';
-  registerLoggerConfig({
-    ...global.__reanimatedLoggerConfig,
-    // Don't reuse previous level and strict values from the global config
+  global.__reanimatedLoggerConfig = {
+    ...currentConfig,
+    // Don't reuse previous level and strict values from the current config
     level: options?.level ?? DEFAULT_LOGGER_CONFIG.level,
     strict: options?.strict ?? DEFAULT_LOGGER_CONFIG.strict,
-  });
+  };
 }
 
 type LogOptions = {
@@ -84,7 +91,7 @@ function handleLog(
   options: LogOptions
 ) {
   'worklet';
-  const config = global.__reanimatedLoggerConfig;
+  const config = getLoggerConfig();
   if (
     // Don't log if the log is marked as strict-only and the config doesn't
     // enable strict logging

package/src/common/processors/colors.ts

@@ -6,12 +6,9 @@ import { IS_ANDROID } from '../constants';
 
 export function processColor(color: unknown): number | null | undefined {
   let normalizedColor = processColorInitially(color);
-  if (normalizedColor === null || normalizedColor === undefined) {
-    return undefined;
-  }
 
   if (typeof normalizedColor !== 'number') {
-    return null;
+    return normalizedColor;
   }
 
   if (IS_ANDROID) {

package/src/commonTypes.ts

@@ -360,7 +360,7 @@ export enum InterfaceOrientation {
 }
 
 export type ShadowNodeWrapper = {
-  __hostObjectShadowNodeWrapper: never;
+  __nativeStateShadowNodeWrapper: never;
 };
 
 export enum KeyboardState {

package/src/createAnimatedComponent/AnimatedComponent.tsx

@@ -120,8 +120,20 @@ export default class AnimatedComponent
     );
 
     if (IS_WEB) {
-      if (this.props.exiting && this._componentDOMRef) {
-        saveSnapshot(this._componentDOMRef);
+      const element = this._componentDOMRef as ReanimatedHTMLElement;
+
+      // If the element was cloned (because of the exiting animation), we need bring it
+      // back to the DOM
+      if (element.dummyClone) {
+        const dummyClone = element.dummyClone;
+        while (dummyClone.firstChild) {
+          element.appendChild(dummyClone.firstChild);
+        }
+        delete element.dummyClone;
+      }
+
+      if (this.props.exiting) {
+        saveSnapshot(element);
       }
 
       if (
@@ -137,11 +149,11 @@ export default class AnimatedComponent
       if (!skipEntering) {
         startWebLayoutAnimation(
           this.props,
-          this._componentDOMRef as ReanimatedHTMLElement,
+          element,
           LayoutAnimationType.ENTERING
         );
-      } else if (this._componentDOMRef) {
-        this._componentDOMRef.style.visibility = 'initial';
+      } else {
+        element.style.visibility = 'initial';
       }
     }
 
@@ -207,6 +219,9 @@ export default class AnimatedComponent
     const { viewTag, shadowNodeWrapper } = this._getViewInfo();
     const newStyles = new Set<StyleProps>(currentStyles);
 
+    const isStyleAttached = (style: StyleProps) =>
+      style.viewDescriptors.has(viewTag);
+
     // remove old styles
     if (prevStyles) {
       // in most of the cases, views have only a single animated style and it remains unchanged
@@ -215,14 +230,14 @@ export default class AnimatedComponent
         prevStyles.length === 1 &&
         currentStyles[0] === prevStyles[0];
 
-      if (hasOneSameStyle) {
+      if (hasOneSameStyle && isStyleAttached(prevStyles[0])) {
         return;
       }
 
       // otherwise, remove each style that is not present in new styles
       for (const prevStyle of prevStyles) {
         const isPresent = currentStyles.some((style) => {
-          if (style === prevStyle) {
+          if (style === prevStyle && isStyleAttached(style)) {
             newStyles.delete(style);
             return true;
           }
@@ -233,6 +248,7 @@ export default class AnimatedComponent
         }
       }
     }
+
     newStyles.forEach((style) => {
       style.viewDescriptors.add(
         {

package/src/createAnimatedComponent/InlinePropManager.ts

@@ -38,23 +38,22 @@ function inlinePropsHasChanged(
   return false;
 }
 
-function getInlinePropsUpdate(inlineProps: Record<string, unknown>) {
+function getInlinePropsUpdate(styleValue: StyleProps): unknown {
   'worklet';
-  const update: Record<string, unknown> = {};
-  for (const [key, styleValue] of Object.entries(inlineProps)) {
-    if (isSharedValue(styleValue)) {
-      update[key] = styleValue.value;
-    } else if (Array.isArray(styleValue)) {
-      update[key] = styleValue.map((item) => {
-        return getInlinePropsUpdate(item);
-      });
-    } else if (typeof styleValue === 'object') {
-      update[key] = getInlinePropsUpdate(styleValue as Record<string, unknown>);
-    } else {
-      update[key] = styleValue;
+  if (isSharedValue(styleValue)) {
+    return styleValue.value;
+  }
+  if (Array.isArray(styleValue)) {
+    return styleValue.map(getInlinePropsUpdate);
+  }
+  if (styleValue && typeof styleValue === 'object') {
+    const update: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(styleValue)) {
+      update[key] = getInlinePropsUpdate(value);
     }
+    return update;
   }
-  return update;
+  return styleValue;
 }
 
 function extractSharedValuesMapFromProps(
@@ -109,7 +108,7 @@ export function getInlineStyle(
   isFirstRender: boolean
 ) {
   if (isFirstRender) {
-    return getInlinePropsUpdate(style);
+    return getInlinePropsUpdate(style) as Record<string, unknown>;
   }
   const newStyle: StyleProps = {};
   for (const [key, styleValue] of Object.entries(style)) {

package/src/css/index.ts

@@ -1,5 +1,5 @@
 'use strict';
-export { createAnimatedComponent } from './component';
+export { createAnimatedComponent as createCSSAnimatedComponent } from './component';
 export { cubicBezier, linear, steps } from './easing';
 export * from './stylesheet';
 export type {

package/src/css/native/normalization/common/settings.ts

@@ -1,17 +1,13 @@
 'use strict';
 import { ReanimatedError } from '../../../../common';
-import {
-  MILLISECONDS_REGEX,
-  SECONDS_REGEX,
-  VALID_PREDEFINED_TIMING_FUNCTIONS,
-} from '../../../constants';
+import { VALID_PREDEFINED_TIMING_FUNCTIONS } from '../../../constants';
 import type {
   CSSTimingFunction,
   NormalizedCSSTimingFunction,
   PredefinedTimingFunction,
 } from '../../../easing';
 import type { TimeUnit } from '../../../types';
-import { isPredefinedTimingFunction } from '../../../utils';
+import { isPredefinedTimingFunction, normalizeTimeUnit } from '../../../utils';
 
 export const ERROR_MESSAGES = {
   invalidDelay: (timeUnit: TimeUnit) =>
@@ -26,17 +22,6 @@ export const ERROR_MESSAGES = {
     `Invalid parametrized timing function "${timingFunction?.toString()}".`,
 };
 
-function normalizeTimeUnit(timeUnit: TimeUnit): number | null {
-  if (typeof timeUnit === 'number') {
-    return timeUnit;
-  } else if (MILLISECONDS_REGEX.test(timeUnit)) {
-    return parseInt(timeUnit, 10);
-  } else if (SECONDS_REGEX.test(timeUnit)) {
-    return parseFloat(timeUnit) * 1000;
-  }
-  return null;
-}
-
 export function normalizeDelay(delay: TimeUnit = 0): number {
   const delayMs = normalizeTimeUnit(delay);
   if (delayMs === null) {

package/src/css/native/style/config.ts

@@ -2,12 +2,12 @@
 import {
   IS_ANDROID,
   processBoxShadowNative,
-  processColor,
   processTransformOrigin,
 } from '../../../common';
 import type { PlainStyle } from '../../types';
 import {
   processAspectRatio,
+  processColor,
   processFontWeight,
   processGap,
   processInset,

package/src/css/utils/parsers.ts

@@ -1,7 +1,8 @@
 'use strict';
 
 import { ReanimatedError } from '../../common';
-import type { SingleCSSTransitionConfig } from '../types';
+import { MILLISECONDS_REGEX, SECONDS_REGEX } from '../constants';
+import type { SingleCSSTransitionConfig, TimeUnit } from '../types';
 import { isTimeUnit, smellsLikeTimingFunction } from './guards';
 
 export function splitByComma(str: string) {
@@ -80,3 +81,14 @@ export function parseSingleTransitionShorthand(
 
   return result;
 }
+
+export function normalizeTimeUnit(timeUnit: TimeUnit): number | null {
+  if (typeof timeUnit === 'number') {
+    return timeUnit;
+  } else if (MILLISECONDS_REGEX.test(timeUnit)) {
+    return parseInt(timeUnit, 10);
+  } else if (SECONDS_REGEX.test(timeUnit)) {
+    return parseFloat(timeUnit) * 1000;
+  }
+  return null;
+}

package/src/css/utils/props.ts

@@ -78,14 +78,6 @@ export function filterCSSAndStyleProperties<S extends AnyRecord>(
 }
 
 function validateCSSAnimationProps(props: Partial<CSSAnimationProperties>) {
-  // Check if any animation properties are present but animationName is missing
-  if (!('animationName' in props) && Object.keys(props).length > 0) {
-    logger.warn(
-      'CSS animation properties were provided without specifying animationName.\n' +
-        'If unintended, add animationName or remove unnecessary animation properties.'
-    );
-  }
-
   // Check if animationDuration is missing when animationName is present
   if (!('animationDuration' in props) && 'animationName' in props) {
     logger.warn(

package/src/css/web/managers/CSSAnimationsManager.ts

@@ -1,4 +1,5 @@
 'use strict';
+import { maybeAddSuffix } from '../../../common';
 import type { ReanimatedHTMLElement } from '../../../ReanimatedModule/js-reanimated';
 import type {
   ConvertValuesToArrays,
@@ -7,7 +8,11 @@ import type {
   ExistingCSSAnimationProperties,
   ICSSAnimationsManager,
 } from '../../types';
-import { convertPropertiesToArrays, kebabizeCamelCase } from '../../utils';
+import {
+  convertPropertiesToArrays,
+  kebabizeCamelCase,
+  normalizeTimeUnit,
+} from '../../utils';
 import { processKeyframeDefinitions } from '../animationParser';
 import {
   configureWebCSSAnimations,
@@ -25,6 +30,8 @@ const isCSSKeyframesRuleImpl = (
 type ProcessedAnimation = {
   keyframesRule: CSSKeyframesRuleImpl;
   removable: boolean;
+  creationTimestamp: number;
+  elapsedTime?: number;
 };
 
 type ProcessedSettings = ConvertValuesToArrays<CSSAnimationSettings>;
@@ -34,6 +41,7 @@ export default class CSSAnimationsManager implements ICSSAnimationsManager {
 
   // Keys are processed keyframes
   private attachedAnimations: Record<string, ProcessedAnimation> = {};
+  private unmountCleanupCalled = false;
 
   constructor(element: ReanimatedHTMLElement) {
     configureWebCSSAnimations();
@@ -55,44 +63,67 @@ export default class CSSAnimationsManager implements ICSSAnimationsManager {
       return;
     }
 
+    const timestamp = Date.now();
     const processedAnimations = definitions.map((definition) => {
+      let processedAnimation: ProcessedAnimation;
+
       // If the CSSKeyframesRule instance was provided, we can just use it
       if (isCSSKeyframesRuleImpl(definition)) {
-        return { keyframesRule: definition, removable: false };
-      }
-
-      // If keyframes was defined as an object, the additional processing is needed
-      const keyframes = definition as CSSAnimationKeyframes;
-      const processedKeyframes = processKeyframeDefinitions(keyframes);
-
-      // If the animation with the same keyframes was already attached, we can reuse it
-      if (this.attachedAnimations[processedKeyframes]) {
-        return {
-          keyframesRule:
-            this.attachedAnimations[processedKeyframes].keyframesRule,
+        processedAnimation = this.attachedAnimations[
+          definition.processedKeyframes
+        ] ?? {
+          keyframesRule: definition,
+          removable: false,
+          creationTimestamp: timestamp,
+        };
+      } else {
+        // If keyframes was defined as an object, the additional processing is needed
+        const keyframes = definition as CSSAnimationKeyframes;
+        const processedKeyframes = processKeyframeDefinitions(keyframes);
+
+        // If the animation with the same keyframes was already attached, we can reuse it
+        // Otherwise, we need to create a new CSSKeyframesRule object
+        processedAnimation = this.attachedAnimations[processedKeyframes] ?? {
+          keyframesRule: new CSSKeyframesRuleImpl(
+            keyframes,
+            processedKeyframes
+          ),
           removable: true,
+          creationTimestamp: timestamp,
         };
       }
 
-      // Otherwise, we need to create a new CSSKeyframesRule object
-      return {
-        keyframesRule: new CSSKeyframesRuleImpl(keyframes, processedKeyframes),
-        removable: true,
-      };
-    });
+      if (this.unmountCleanupCalled) {
+        // unmountCleanup is called not only when the component truly unmounts, but also
+        // when display property is set to 'none' (e.g. during navigation between screens)
+        // In such a case, we don't want to restart the animation after re-entering the
+        // screen so we have to shift its delay by the time elapsed since the animation
+        // was started for the first time.
+        processedAnimation.elapsedTime =
+          timestamp - processedAnimation.creationTimestamp;
+      }
 
-    const animationNames = processedAnimations.map(
-      ({ keyframesRule: { name } }) => name
-    );
+      return processedAnimation;
+    });
 
+    this.unmountCleanupCalled = false;
     this.updateAttachedAnimations(processedAnimations);
-    this.setElementAnimations(animationNames, animationSettings);
+    this.setElementAnimations(processedAnimations, animationSettings);
   }
 
   unmountCleanup(): void {
-    // We use setTimeout to ensure that the animation is removed after the
-    // component is unmounted (it puts the detach call at the end of the event loop)
-    setTimeout(this.detach.bind(this));
+    if (!this.unmountCleanupCalled) {
+      this.unmountCleanupCalled = true;
+      // We use setTimeout to ensure that the animation is removed after the
+      // component is unmounted (it puts the detach call at the end of the event loop)
+      // We just remove the animation definition from the style sheet as there is no
+      // need to clean up view props if it is removed from the DOM.
+      setTimeout(() => {
+        this.removeAnimationsFromStyleSheet(
+          Object.values(this.attachedAnimations)
+        );
+      });
+    }
   }
 
   private detach() {
@@ -109,13 +140,8 @@ export default class CSSAnimationsManager implements ICSSAnimationsManager {
     this.element.style.animationPlayState = '';
     this.element.style.animationTimingFunction = '';
 
-    attachedAnimations.forEach(
-      ({ keyframesRule: { name, processedKeyframes }, removable }) => {
-        if (removable && processedKeyframes) {
-          removeCSSAnimation(name);
-        }
-      }
-    );
+    this.removeAnimationsFromStyleSheet(attachedAnimations);
+    this.unmountCleanupCalled = false;
     this.attachedAnimations = {};
   }
 
@@ -147,10 +173,12 @@ export default class CSSAnimationsManager implements ICSSAnimationsManager {
   }
 
   private setElementAnimations(
-    animationNames: string[],
+    processedAnimations: ProcessedAnimation[],
     animationSettings: ProcessedSettings
   ) {
-    this.element.style.animationName = animationNames.join(',');
+    this.element.style.animationName = processedAnimations
+      .map(({ keyframesRule: { name } }) => name)
+      .join(',');
 
     this.element.style.animationDuration = maybeAddSuffixes(
       animationSettings,
@@ -158,11 +186,18 @@ export default class CSSAnimationsManager implements ICSSAnimationsManager {
       'ms'
     ).join(',');
 
-    this.element.style.animationDelay = maybeAddSuffixes(
-      animationSettings,
-      'animationDelay',
-      'ms'
-    ).join(',');
+    const animationDelays = animationSettings.animationDelay ?? [];
+    this.element.style.animationDelay = processedAnimations
+      .map(({ elapsedTime }, i) => {
+        const providedDelay = animationDelays[i] ?? 0;
+        return maybeAddSuffix(
+          elapsedTime
+            ? (normalizeTimeUnit(providedDelay) ?? 0) - elapsedTime
+            : providedDelay,
+          'ms'
+        );
+      })
+      .join(',');
 
     if (animationSettings.animationIterationCount) {
       this.element.style.animationIterationCount =
@@ -190,4 +225,14 @@ export default class CSSAnimationsManager implements ICSSAnimationsManager {
       );
     }
   }
+
+  private removeAnimationsFromStyleSheet(animations: ProcessedAnimation[]) {
+    animations.forEach(
+      ({ keyframesRule: { name, processedKeyframes }, removable }) => {
+        if (removable && processedKeyframes) {
+          removeCSSAnimation(name);
+        }
+      }
+    );
+  }
 }

package/src/fabricUtils.ts

@@ -4,37 +4,23 @@ import type { ShadowNodeWrapper, WrapperRef } from './commonTypes';
 import type { HostInstance } from './platform-specific/findHostInstance';
 import { findHostInstance } from './platform-specific/findHostInstance';
 
-let getInternalInstanceHandleFromPublicInstance: (ref: unknown) => {
-  stateNode: { node: unknown };
-};
-
 export function getShadowNodeWrapperFromRef(
   ref: WrapperRef,
   hostInstance?: HostInstance
 ): ShadowNodeWrapper {
-  if (getInternalInstanceHandleFromPublicInstance === undefined) {
-    try {
-      getInternalInstanceHandleFromPublicInstance =
-        // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
-        require('react-native/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance')
-          .getInternalInstanceHandleFromPublicInstance ??
-        ((_ref: any) => _ref._internalInstanceHandle);
-    } catch {
-      getInternalInstanceHandleFromPublicInstance = (_ref: any) =>
-        _ref._internalInstanceHandle;
+  let resolvedInstance =
+    hostInstance?.__internalInstanceHandle ?? ref?.__internalInstanceHandle;
+
+  if (!resolvedInstance) {
+    if (ref.getNativeScrollRef) {
+      resolvedInstance = (ref.getNativeScrollRef() as any)
+        .__internalInstanceHandle;
+    } else if ((ref as any)._reactInternals) {
+      resolvedInstance = findHostInstance(ref).__internalInstanceHandle;
+    } else {
+      throw new ReanimatedError(`Failed to find host instance for a ref.}`);
     }
   }
 
-  const resolvedRef =
-    ref.getScrollResponder?.()?.getNativeScrollRef?.() ??
-    ref.getNativeScrollRef?.() ??
-    ref;
-
-  const resolvedInstance =
-    ref?.__internalInstanceHandle ??
-    getInternalInstanceHandleFromPublicInstance(
-      hostInstance ?? findHostInstance(resolvedRef)
-    );
-
-  return resolvedInstance?.stateNode?.node;
+  return resolvedInstance!.stateNode.node as ShadowNodeWrapper;
 }

package/src/hook/useAnimatedRef.ts

@@ -17,10 +17,6 @@ import type {
   MaybeObserverCleanup,
 } from './commonTypes';
 
-function getComponentOrScrollable(ref: WrapperRef) {
-  return ref.getNativeScrollRef?.() ?? ref.getScrollableNode?.() ?? ref;
-}
-
 function useAnimatedRefBase<TRef extends WrapperRef>(
   getWrapper: (ref: TRef) => ShadowNodeWrapper
 ): AnimatedRef<TRef> {
@@ -36,7 +32,8 @@ function useAnimatedRefBase<TRef extends WrapperRef>(
         wrapperRef.current = getWrapper(ref);
 
         // We have to unwrap the tag from the shadow node wrapper.
-        fun.getTag = () => findNodeHandle(getComponentOrScrollable(ref));
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        fun.getTag = () => findNodeHandle(ref as any);
         fun.current = ref;
 
         if (observers.size) {
@@ -81,9 +78,7 @@ function useAnimatedRefNative<
   );
 
   const resultRef = useAnimatedRefBase<TRef>((ref) => {
-    const currentWrapper = getShadowNodeWrapperFromRef(
-      getComponentOrScrollable(ref)
-    );
+    const currentWrapper = getShadowNodeWrapperFromRef(ref);
 
     sharedWrapper.value = currentWrapper;
 
@@ -106,7 +101,15 @@ function useAnimatedRefNative<
 function useAnimatedRefWeb<
   TRef extends WrapperRef = React.Component,
 >(): AnimatedRef<TRef> {
-  return useAnimatedRefBase<TRef>((ref) => getComponentOrScrollable(ref));
+  return useAnimatedRefBase<TRef>((ref) => {
+    if (ref.getScrollableNode) {
+      return ref.getScrollableNode();
+    }
+    if (ref.getNativeScrollRef) {
+      return ref.getNativeScrollRef();
+    }
+    return ref;
+  });
 }
 
 /**

package/src/index.ts

@@ -14,6 +14,7 @@ import * as Animated from './Animated';
 
 export default Animated;
 
+export { createAnimatedComponent } from './Animated';
 export type {
   DecayAnimation,
   DelayAnimation,

package/src/initializers.ts

@@ -1,13 +1,7 @@
 'use strict';
 import { executeOnUIRuntimeSync } from 'react-native-worklets';
 
-import {
-  DEFAULT_LOGGER_CONFIG,
-  IS_WEB,
-  ReanimatedError,
-  registerLoggerConfig,
-  SHOULD_BE_USE_WEB,
-} from './common';
+import { IS_WEB, ReanimatedError, SHOULD_BE_USE_WEB } from './common';
 import { initSvgCssSupport } from './css/svg';
 import { getStaticFeatureFlag } from './featureFlags';
 import type { IReanimatedModule } from './ReanimatedModule';
@@ -25,11 +19,9 @@ export function initializeReanimatedModule(
   }
 }
 
-registerLoggerConfig(DEFAULT_LOGGER_CONFIG);
 if (!SHOULD_BE_USE_WEB) {
   executeOnUIRuntimeSync(() => {
     'worklet';
     global._tagToJSPropNamesMapping = {};
-    registerLoggerConfig(DEFAULT_LOGGER_CONFIG);
   })();
 }