react-native-reanimated 4.0.2 → 4.1.0-jsx-fix

package/src/ViewDescriptorsSet.ts

@@ -1,11 +1,11 @@
 'use strict';
-import type { SharedValue } from './commonTypes';
+import type { SharedValue, StyleUpdaterContainer } from './commonTypes';
 import { makeMutable } from './core';
 import type { Descriptor } from './hook/commonTypes';
 
 export interface ViewDescriptorsSet {
   shareableViewDescriptors: SharedValue<Descriptor[]>;
-  add: (item: Descriptor) => void;
+  add: (item: Descriptor, updaterContainer?: StyleUpdaterContainer) => void;
   remove: (viewTag: number) => void;
 }
 
@@ -13,7 +13,8 @@ export function makeViewDescriptorsSet(): ViewDescriptorsSet {
   const shareableViewDescriptors = makeMutable<Descriptor[]>([]);
   const data: ViewDescriptorsSet = {
     shareableViewDescriptors,
-    add: (item: Descriptor) => {
+    add: (item: Descriptor, updaterContainer?: StyleUpdaterContainer) => {
+      const updater = updaterContainer?.current;
       shareableViewDescriptors.modify((descriptors) => {
         'worklet';
         const index = descriptors.findIndex(
@@ -24,6 +25,7 @@ export function makeViewDescriptorsSet(): ViewDescriptorsSet {
         } else {
           descriptors.push(item);
         }
+        updater?.(true);
         return descriptors;
       }, false);
     },

package/src/animation/spring/springConfigs.ts

@@ -57,8 +57,8 @@ export const SnappySpringConfigWithDuration = {
  *   spring will come to rest faster. Defaults to 120.
  * @param stiffness - How bouncy the spring is. Defaults to 900.
  * @param duration - Perceptual duration of the animation in milliseconds.
- *   Actual duration is 1.5 times higher. Defaults to 550ms if `dampingRatio` is
- *   provided.
+ *   Actual duration is 1.5 times the value of perceptual duration. Defaults to
+ *   550ms if `dampingRatio` is provided.
  * @param dampingRatio - How damped the spring is. Value `1` means the spring is
  *   critically damped, value `<1` means the spring is underdamped and value
  *   `>1` means the spring is overdamped. Defaults to 1 if `duration` is
@@ -75,21 +75,21 @@ export const SnappySpringConfigWithDuration = {
  * @see https://docs.swmansion.com/react-native-reanimated/docs/animations/withSpring/#config-
  */
 export type SpringConfig = {
-  stiffness?: number;
+  mass?: number;
   overshootClamping?: boolean;
   energyThreshold?: number;
   velocity?: number;
   reduceMotion?: ReduceMotion;
 } & (
   | {
-      mass?: number;
+      stiffness?: number;
       damping?: number;
       duration?: never;
       dampingRatio?: never;
       clamp?: never;
     }
   | {
-      mass?: never;
+      stiffness?: never;
       damping?: never;
       duration?: number;
       dampingRatio?: number;

package/src/animation/util.ts

@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 'use strict';
 import {
+  createSerializable,
   isWorkletFunction,
-  makeShareableCloneRecursive,
   runOnUI,
-  shareableMappingCache,
+  RuntimeKind,
+  serializableMappingCache,
 } from 'react-native-worklets';
 
 import type { ParsedColorArray } from '../Colors';
@@ -51,8 +52,8 @@ import {
  * object to prevent from freezing it in development.
  */
 const IN_STYLE_UPDATER = { current: false };
-const IN_STYLE_UPDATER_UI = makeShareableCloneRecursive({ current: false });
-shareableMappingCache.set(IN_STYLE_UPDATER, IN_STYLE_UPDATER_UI);
+const IN_STYLE_UPDATER_UI = createSerializable({ current: false });
+serializableMappingCache.set(IN_STYLE_UPDATER, IN_STYLE_UPDATER_UI);
 
 const LAYOUT_ANIMATION_SUPPORTED_PROPS = {
   originX: true,
@@ -84,7 +85,7 @@ export function assertEasingIsWorklet(
   easing: EasingFunction | EasingFunctionFactory
 ): void {
   'worklet';
-  if (globalThis._WORKLET) {
+  if (globalThis.__RUNTIME_KIND !== RuntimeKind.ReactNative) {
     // If this is called on UI (for example from gesture handler with worklets), we don't get easing,
     // but its bound copy, which is not a worklet. We don't want to throw any error then.
     return;
@@ -553,7 +554,10 @@ export function defineAnimation<
   U extends AnimationObject | StyleLayoutAnimation = T, // type that's received
 >(starting: AnimationToDecoration<T, U>, factory: () => T): T {
   'worklet';
-  if (!globalThis._WORKLET && IN_STYLE_UPDATER.current) {
+  if (
+    globalThis.__RUNTIME_KIND === RuntimeKind.ReactNative &&
+    IN_STYLE_UPDATER.current
+  ) {
     return starting as unknown as T;
   }
   const create = () => {
@@ -563,7 +567,10 @@ export function defineAnimation<
     return animation;
   };
 
-  if (globalThis._WORKLET || SHOULD_BE_USE_WEB) {
+  if (
+    globalThis.__RUNTIME_KIND !== RuntimeKind.ReactNative ||
+    SHOULD_BE_USE_WEB
+  ) {
     return create();
   }
   create.__isAnimationDefinition = true;
@@ -575,7 +582,7 @@ export function defineAnimation<
 function cancelAnimationNative<TValue>(sharedValue: SharedValue<TValue>): void {
   'worklet';
   // setting the current value cancels the animation if one is currently running
-  if (globalThis._WORKLET) {
+  if (globalThis.__RUNTIME_KIND !== RuntimeKind.ReactNative) {
     sharedValue.value = sharedValue.value; // eslint-disable-line no-self-assign
   } else {
     runOnUI(() => {

package/src/common/errors.ts

@@ -1,6 +1,8 @@
 /* eslint-disable reanimated/use-reanimated-error */
 'use strict';
 
+import { RuntimeKind } from 'react-native-worklets';
+
 function ReanimatedErrorConstructor(message: string): ReanimatedError {
   'worklet';
   const prefix = '[Reanimated]';
@@ -15,7 +17,7 @@ function ReanimatedErrorConstructor(message: string): ReanimatedError {
  */
 export function registerReanimatedError() {
   'worklet';
-  if (globalThis._WORKLET) {
+  if (globalThis.__RUNTIME_KIND !== RuntimeKind.ReactNative) {
     globalThis.ReanimatedError =
       ReanimatedErrorConstructor as IReanimatedErrorConstructor;
   }

package/src/common/processors/colors.ts

@@ -5,7 +5,6 @@ import type { StyleProps } from '../../commonTypes';
 import { IS_ANDROID } from '../constants';
 
 export function processColor(color: unknown): number | null | undefined {
-  'worklet';
   let normalizedColor = processColorInitially(color);
   if (normalizedColor === null || normalizedColor === undefined) {
     return undefined;
@@ -27,7 +26,6 @@ export function processColor(color: unknown): number | null | undefined {
 }
 
 export function processColorsInProps(props: StyleProps) {
-  'worklet';
   for (const key in props) {
     if (ColorProperties.includes(key)) {
       if (Array.isArray(props[key])) {

package/src/commonTypes.ts

@@ -1,14 +1,21 @@
 'use strict';
 
+import type { ComponentRef, RefObject } from 'react';
 import type {
   ImageStyle,
+  NativeMethods,
+  ScrollResponderMixin,
+  ScrollViewComponent,
   TextStyle,
   TransformsStyle,
+  View,
   ViewStyle,
 } from 'react-native';
-import type { ShareableRef, WorkletFunction } from 'react-native-worklets';
+import type { SerializableRef, WorkletFunction } from 'react-native-worklets';
 
+import type { Maybe } from './common/types';
 import type { CSSAnimationProperties, CSSTransitionProperties } from './css';
+import type { AnyRecord } from './css/types';
 import type { EasingFunctionFactory } from './Easing';
 
 type LayoutAnimationOptions =
@@ -115,8 +122,7 @@ export interface BaseLayoutAnimationConfig {
   mass?: number;
   stiffness?: number;
   overshootClamping?: number;
-  restDisplacementThreshold?: number;
-  restSpeedThreshold?: number;
+  energyThreshold?: number;
 }
 
 export interface BaseBuilderAnimationConfig extends BaseLayoutAnimationConfig {
@@ -157,7 +163,7 @@ export type StylePropsWithArrayTransform = StyleProps & {
 export interface LayoutAnimationBatchItem {
   viewTag: number;
   type: LayoutAnimationType;
-  config: ShareableRef<Keyframe | LayoutAnimationFunction> | undefined;
+  config: SerializableRef<Keyframe | LayoutAnimationFunction> | undefined;
 }
 
 export type RequiredKeys<T, K extends keyof T> = T & Required<Pick<T, K>>;
@@ -211,6 +217,11 @@ export interface Mutable<Value = unknown> extends SharedValue<Value> {
    * method.
    */
   _value: Value;
+  /**
+   * Defined only when enabled with a feature flag
+   * `USE_SYNCHRONIZABLE_FOR_MUTABLES`.
+   */
+  setDirty?: (dirty: boolean) => void;
 }
 
 export type MapperRawInputs = unknown[];
@@ -220,7 +231,7 @@ export type MapperOutputs = SharedValue[];
 export type MapperRegistry = {
   start: (
     mapperID: number,
-    worklet: () => void,
+    worklet: (forceUpdate?: boolean) => void,
     inputs: MapperRawInputs,
     outputs?: MapperOutputs
   ) => void;
@@ -442,10 +453,30 @@ export type AnimatedTransform = MaybeSharedValueRecursive<
   TransformsStyle['transform']
 >;
 
-/** @deprecated Please use {@link AnimatedStyle} type instead. */
-export type AnimateStyle<Style = DefaultStyle> = AnimatedStyle<Style>;
+export type StyleUpdaterContainer = RefObject<
+  ((forceUpdate: boolean) => void) | undefined
+>;
+
+type NativeScrollRef = Maybe<
+  (
+    | ComponentRef<typeof View>
+    | ComponentRef<typeof ScrollViewComponent>
+    | NativeMethods
+  ) & {
+    __internalInstanceHandle?: AnyRecord;
+  }
+>;
+
+type InstanceMethods = {
+  getScrollResponder?: () => Maybe<
+    (ScrollResponderMixin | React.JSX.Element) & {
+      getNativeScrollRef?: () => NativeScrollRef;
+    }
+  >;
+  getNativeScrollRef?: () => NativeScrollRef;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getScrollableNode?: () => any;
+  __internalInstanceHandle?: AnyRecord;
+};
 
-/** @deprecated This type is no longer relevant. */
-export type StylesOrDefault<T> = 'style' extends keyof T
-  ? MaybeSharedValueRecursive<T['style']>
-  : Record<string, unknown>;
+export type WrapperRef = (React.Component & InstanceMethods) | InstanceMethods;

package/src/component/FlatList.tsx

@@ -1,5 +1,6 @@
 'use strict';
-import React, { useRef } from 'react';
+import type { RefObject } from 'react';
+import { useMemo, useRef } from 'react';
 import type {
   FlatListProps,
   LayoutChangeEvent,
@@ -25,10 +26,8 @@ interface CellRendererComponentProps<ItemT = any> {
 }
 
 const createCellRendererComponent = (
-  itemLayoutAnimationRef?: React.MutableRefObject<
-    ILayoutAnimationBuilder | undefined
-  >,
-  cellRendererComponentStyleRef?: React.MutableRefObject<
+  itemLayoutAnimationRef?: RefObject<ILayoutAnimationBuilder | undefined>,
+  cellRendererComponentStyleRef?: RefObject<
     ReanimatedFlatListPropsWithLayout<any>['CellRendererComponentStyle']
   >
 ) => {
@@ -122,7 +121,7 @@ const FlatListRender = function <Item = any>(
   const cellRendererComponentStyleRef = useRef(CellRendererComponentStyle);
   cellRendererComponentStyleRef.current = CellRendererComponentStyle;
 
-  const CellRendererComponent = React.useMemo(
+  const CellRendererComponent = useMemo(
     () =>
       createCellRendererComponent(
         itemLayoutAnimationRef,

package/src/component/ScrollView.tsx

@@ -29,12 +29,11 @@ export function AnimatedScrollView({
   ref,
   ...restProps
 }: AnimatedScrollViewProps) {
-  const animatedRef = (
+  const animatedRef =
     ref === null
       ? // eslint-disable-next-line react-hooks/rules-of-hooks
         useAnimatedRef<ScrollView>()
-      : ref
-  ) as AnimatedRef<AnimatedScrollView>;
+      : (ref as AnimatedRef<ScrollView>);
 
   if (scrollViewOffset) {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/src/core.ts

@@ -4,6 +4,7 @@ import {
   isEdgeToEdge,
 } from 'react-native-is-edge-to-edge';
 import type { WorkletFunction } from 'react-native-worklets';
+import { createSerializable } from 'react-native-worklets';
 
 import { logger, ReanimatedError } from './common';
 import type {
@@ -14,10 +15,10 @@ import type {
   SharedValue,
   Value3D,
   ValueRotation,
+  WrapperRef,
 } from './commonTypes';
 import { ReanimatedModule } from './ReanimatedModule';
 import { SensorContainer } from './SensorContainer';
-import { makeShareableCloneRecursive } from './workletFunctions';
 
 export { startMapper, stopMapper } from './mappers';
 export { makeMutable } from './mutables';
@@ -26,7 +27,8 @@ const EDGE_TO_EDGE = isEdgeToEdge();
 
 /**
  * @deprecated Please use the exported variable `reanimatedVersion` instead.
- * @returns `true` in Reanimated 3, doesn't exist in Reanimated 2 or 1
+ * @returns `false` in Reanimated 4, `true` in Reanimated 3, doesn't exist in
+ *   Reanimated 2 or 1
  */
 export const isReanimated3 = () => {
   logger.warn(
@@ -38,17 +40,16 @@ export const isReanimated3 = () => {
 // Superseded by check in `/src/threads.ts`.
 // Used by `react-navigation` to detect if using Reanimated 2 or 3.
 /**
- * @deprecated This function was superseded by other checks. We keep it here for
- *   backward compatibility reasons. If you need to check if you are using
- *   Reanimated 3 or Reanimated 2 please use `isReanimated3` function instead.
- * @returns `true` in Reanimated 3, doesn't exist in Reanimated 2
+ * @deprecated Please use the exported variable `reanimatedVersion` instead.
+ * @returns `false` in Reanimated 4, `true` in Reanimated 3, doesn't exist in
+ *   Reanimated 2 or 1
  */
 export const isConfigured = isReanimated3;
 
 export function getViewProp<T>(
   viewTag: number,
   propName: string,
-  component?: React.Component // required on Fabric
+  component?: WrapperRef | null // required on Fabric
 ): Promise<T> {
   if (!component) {
     throw new ReanimatedError(
@@ -63,7 +64,7 @@ export function getViewProp<T>(
       propName,
       component,
       (result: T) => {
-        if (typeof result === 'string' && result.substr(0, 6) === 'error:') {
+        if (typeof result === 'string' && result.slice(0, 6) === 'error:') {
           // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
           reject(result);
         } else {
@@ -95,9 +96,7 @@ export function registerEventHandler<T>(
     global.__frameTimestamp = undefined;
   }
   return ReanimatedModule.registerEventHandler(
-    makeShareableCloneRecursive(
-      handleAndFlushAnimationFrame as WorkletFunction
-    ),
+    createSerializable(handleAndFlushAnimationFrame as WorkletFunction),
     eventName,
     emitterReactTag
   );
@@ -132,9 +131,7 @@ export function subscribeForKeyboardEvents(
   }
 
   return ReanimatedModule.subscribeForKeyboardEvents(
-    makeShareableCloneRecursive(
-      handleAndFlushAnimationFrame as WorkletFunction
-    ),
+    createSerializable(handleAndFlushAnimationFrame as WorkletFunction),
     EDGE_TO_EDGE || (options.isStatusBarTranslucentAndroid ?? false),
     EDGE_TO_EDGE || (options.isNavigationBarTranslucentAndroid ?? false)
   );
@@ -156,7 +153,7 @@ export function registerSensor(
   return sensorContainer.registerSensor(
     sensorType,
     config,
-    makeShareableCloneRecursive(eventHandler as WorkletFunction)
+    createSerializable(eventHandler as WorkletFunction)
   );
 }
 

package/src/createAnimatedComponent/AnimatedComponent.tsx

@@ -3,9 +3,8 @@ import '../layoutReanimation/animationsManager';
 
 import type React from 'react';
 
-import { getReduceMotionFromConfig } from '../animation/util';
 import { maybeBuild } from '../animationBuilder';
-import { IS_JEST, IS_WEB } from '../common';
+import { IS_JEST, IS_WEB, logger } from '../common';
 import type { StyleProps } from '../commonTypes';
 import { LayoutAnimationType } from '../commonTypes';
 import { SkipEnteringContext } from '../component/LayoutAnimationConfig';
@@ -60,7 +59,8 @@ export default class AnimatedComponent
   _displayName: string;
   _animatedStyles: StyleProps[] = [];
   _prevAnimatedStyles: StyleProps[] = [];
-  _animatedProps?: Partial<AnimatedComponentProps<AnimatedProps>>;
+  _animatedProps: Partial<AnimatedComponentProps<AnimatedProps>>[] = [];
+  _prevAnimatedProps: Partial<AnimatedComponentProps<AnimatedProps>>[] = [];
   _isFirstRender = true;
   jestInlineStyle: NestedArray<StyleProps> | undefined;
   jestAnimatedStyle: { value: StyleProps } = { value: {} };
@@ -103,7 +103,7 @@ export default class AnimatedComponent
       this._NativeEventsManager = new NativeEventsManager(this, this._options);
     }
     this._NativeEventsManager?.attachEvents();
-    this._attachAnimatedStyles();
+    this._updateAnimatedStylesAndProps();
     this._InlinePropManager.attachInlineProps(this, this._getViewInfo());
 
     if (this._options?.jsProps?.length) {
@@ -199,50 +199,48 @@ export default class AnimatedComponent
     }
   }
 
-  _attachAnimatedStyles() {
-    const animatedProps = this.props.animatedProps;
-    const prevAnimatedProps = this._animatedProps;
-    this._animatedProps = animatedProps;
-
+  _handleAnimatedStylesUpdate(
+    prevStyles: StyleProps[],
+    currentStyles: StyleProps[],
+    jestAnimatedStyleOrProps: { value: StyleProps }
+  ) {
     const { viewTag, shadowNodeWrapper } = this._getViewInfo();
+    const newStyles = new Set<StyleProps>(currentStyles);
 
     // remove old styles
-    if (this._prevAnimatedStyles) {
+    if (prevStyles) {
       // in most of the cases, views have only a single animated style and it remains unchanged
       const hasOneSameStyle =
-        this._animatedStyles.length === 1 &&
-        this._prevAnimatedStyles.length === 1 &&
-        this._animatedStyles[0] === this._prevAnimatedStyles[0];
-
-      if (!hasOneSameStyle) {
-        // otherwise, remove each style that is not present in new styles
-        for (const prevStyle of this._prevAnimatedStyles) {
-          const isPresent = this._animatedStyles.some(
-            (style) => style === prevStyle
-          );
-          if (!isPresent) {
-            prevStyle.viewDescriptors.remove(viewTag);
-          }
-        }
-      }
-    }
+        currentStyles.length === 1 &&
+        prevStyles.length === 1 &&
+        currentStyles[0] === prevStyles[0];
 
-    if (animatedProps && IS_JEST) {
-      this.jestAnimatedProps.value = {
-        ...this.jestAnimatedProps.value,
-        ...animatedProps?.initial?.value,
-      };
+      if (hasOneSameStyle) {
+        return;
+      }
 
-      if (animatedProps?.jestAnimatedValues) {
-        animatedProps.jestAnimatedValues.current = this.jestAnimatedProps;
+      // otherwise, remove each style that is not present in new styles
+      for (const prevStyle of prevStyles) {
+        const isPresent = currentStyles.some((style) => {
+          if (style === prevStyle) {
+            newStyles.delete(style);
+            return true;
+          }
+          return false;
+        });
+        if (!isPresent) {
+          prevStyle.viewDescriptors.remove(viewTag);
+        }
       }
     }
-
-    this._animatedStyles.forEach((style) => {
-      style.viewDescriptors.add({
-        tag: viewTag,
-        shadowNodeWrapper,
-      });
+    newStyles.forEach((style) => {
+      style.viewDescriptors.add(
+        {
+          tag: viewTag,
+          shadowNodeWrapper,
+        },
+        style.styleUpdaterContainer
+      );
       if (IS_JEST) {
         /**
          * We need to connect Jest's TestObject instance whose contains just
@@ -251,26 +249,23 @@ export default class AnimatedComponent
          * because TestObject contains a copy of props - look at render
          * function: const props = this._filterNonAnimatedProps(this.props);
          */
-        this.jestAnimatedStyle.value = {
-          ...this.jestAnimatedStyle.value,
-          ...style.initial.value,
-        };
-        style.jestAnimatedValues.current = this.jestAnimatedStyle;
+        Object.assign(jestAnimatedStyleOrProps.value, style.initial.value);
+        style.jestAnimatedValues.current = jestAnimatedStyleOrProps;
       }
     });
+  }
 
-    // detach old animatedProps
-    if (prevAnimatedProps && prevAnimatedProps !== this.props.animatedProps) {
-      prevAnimatedProps.viewDescriptors!.remove(viewTag as number);
-    }
-
-    // attach animatedProps property
-    if (this.props.animatedProps?.viewDescriptors) {
-      this.props.animatedProps.viewDescriptors.add({
-        tag: viewTag as number,
-        shadowNodeWrapper: shadowNodeWrapper!,
-      });
-    }
+  _updateAnimatedStylesAndProps() {
+    this._handleAnimatedStylesUpdate(
+      this._prevAnimatedStyles,
+      this._animatedStyles,
+      this.jestAnimatedStyle
+    );
+    this._handleAnimatedStylesUpdate(
+      this._prevAnimatedProps,
+      this._animatedProps,
+      this.jestAnimatedProps
+    );
   }
 
   componentDidUpdate(
@@ -290,7 +285,7 @@ export default class AnimatedComponent
     );
 
     this._NativeEventsManager?.updateEvents(prevProps);
-    this._attachAnimatedStyles();
+    this._updateAnimatedStylesAndProps();
     this._InlinePropManager.attachInlineProps(this, this._getViewInfo());
 
     if (IS_WEB && this.props.exiting && this._componentDOMRef) {
@@ -312,12 +307,38 @@ export default class AnimatedComponent
   }
 
   _updateStyles(props: AnimatedComponentProps<InitialComponentProps>): void {
-    const filtered = filterStyles(flattenArray(props.style ?? []));
+    const filteredStyles = filterStyles(flattenArray(props.style ?? []));
     this._prevAnimatedStyles = this._animatedStyles;
-    this._animatedStyles = filtered.animatedStyles;
-    this._cssStyle = filtered.cssStyle;
-  }
+    this._animatedStyles = filteredStyles.animatedStyles;
 
+    const filteredAnimatedProps = filterStyles(
+      flattenArray(props.animatedProps ?? [])
+    );
+    this._prevAnimatedProps = this._animatedProps;
+    this._animatedProps = filteredAnimatedProps.animatedStyles;
+
+    if (filteredAnimatedProps.cssStyle) {
+      if (__DEV__ && filteredStyles.cssStyle) {
+        logger.warn(
+          'AnimatedComponent: CSS properties cannot be used in style and animatedProps at the same time. Using properties from the style object.'
+        );
+        this._cssStyle = filteredStyles.cssStyle;
+        return;
+      }
+
+      // Add all remaining props to cssStyle object
+      // (e.g. SVG components are styled via top level props, not via style object)
+      const mergedProps = {
+        ...props,
+        ...filteredAnimatedProps.cssStyle,
+      };
+      delete mergedProps.style;
+      delete mergedProps.animatedProps;
+      this._cssStyle = mergedProps;
+    } else {
+      this._cssStyle = filteredStyles.cssStyle ?? {};
+    }
+  }
   _configureLayoutAnimation(
     type: LayoutAnimationType,
     currentConfig: LayoutAnimationOrBuilder | undefined,
@@ -327,13 +348,6 @@ export default class AnimatedComponent
       return;
     }
 
-    if (this._isReducedMotion(currentConfig)) {
-      if (!previousConfig) {
-        return;
-      }
-      currentConfig = undefined;
-    }
-
     updateLayoutAnimations(
       type === LayoutAnimationType.ENTERING
         ? this.reanimatedID
@@ -350,14 +364,6 @@ export default class AnimatedComponent
     );
   }
 
-  _isReducedMotion(config?: LayoutAnimationOrBuilder): boolean {
-    return config &&
-      'getReduceMotion' in config &&
-      typeof config.getReduceMotion === 'function'
-      ? getReduceMotionFromConfig(config.getReduceMotion())
-      : getReduceMotionFromConfig();
-  }
-
   // This is a component lifecycle method from React, therefore we are not calling it directly.
   // It is called before the component gets rerendered. This way we can access components' position before it changed
   // and later on, in componentDidUpdate, calculate translation for layout transition.

package/src/createAnimatedComponent/NativeEventsManager.ts

@@ -103,7 +103,7 @@ export class NativeEventsManager implements INativeEventsManager {
       // On the first render of a component, we may already receive a resolved view tag.
       return this.#managedComponent.getComponentViewTag();
     }
-    if (componentAnimatedRef.__nativeTag) {
+    if (componentAnimatedRef?.__nativeTag) {
       return componentAnimatedRef.__nativeTag ?? -1;
     }
     /*