react-native-reanimated 3.18.0 → 3.18.2

package/src/createAnimatedComponent/createAnimatedComponent.tsx

@@ -58,6 +58,7 @@ import type {
   IAnimatedComponentInternal,
   INativeEventsManager,
   InitialComponentProps,
+  LayoutAnimationOrBuilder,
   NestedArray,
   ViewInfo,
 } from './commonTypes';
@@ -169,22 +170,13 @@ export function createAnimatedComponent(
         this.jestAnimatedProps = { value: {} };
       }
 
-      const entering = this.props.entering;
       const skipEntering = this.context?.current;
-      if (
-        !entering ||
-        getReducedMotionFromConfig(entering as CustomConfig) ||
-        skipEntering ||
-        !isFabric()
-      ) {
-        return;
+      if (isFabric() && !skipEntering) {
+        this._configureLayoutAnimation(
+          LayoutAnimationType.ENTERING,
+          this.props.entering
+        );
       }
-      // This call is responsible for configuring entering animations on Fabric.
-      updateLayoutAnimations(
-        this.reanimatedID,
-        LayoutAnimationType.ENTERING,
-        maybeBuild(entering, this.props?.style, AnimatedComponent.displayName)
-      );
     }
 
     componentDidMount() {
@@ -197,10 +189,14 @@ export function createAnimatedComponent(
       this._attachAnimatedStyles();
       this._InlinePropManager.attachInlineProps(this, this._getViewInfo());
 
-      const layout = this.props.layout;
-      if (layout) {
-        this._configureLayoutTransition();
-      }
+      this._configureLayoutAnimation(
+        LayoutAnimationType.LAYOUT,
+        this.props.layout
+      );
+      this._configureLayoutAnimation(
+        LayoutAnimationType.EXITING,
+        this.props.exiting
+      );
 
       if (IS_WEB) {
         if (this.props.exiting && this._componentDOMRef) {
@@ -276,15 +272,7 @@ export function createAnimatedComponent(
             ? getReduceMotionFromConfig(exiting.getReduceMotion())
             : getReduceMotionFromConfig();
         if (!reduceMotionInExiting) {
-          updateLayoutAnimations(
-            this.getComponentViewTag(),
-            LayoutAnimationType.EXITING,
-            maybeBuild(
-              exiting,
-              this.props?.style,
-              AnimatedComponent.displayName
-            )
-          );
+          this._configureLayoutAnimation(LayoutAnimationType.EXITING, exiting);
         }
       }
 
@@ -465,15 +453,19 @@ export function createAnimatedComponent(
     componentDidUpdate(
       prevProps: AnimatedComponentProps<InitialComponentProps>,
       _prevState: Readonly<unknown>,
-      // This type comes straight from React
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       snapshot: DOMRect | null
     ) {
-      const layout = this.props.layout;
-      const oldLayout = prevProps.layout;
-      if (layout !== oldLayout) {
-        this._configureLayoutTransition();
-      }
+      this._configureLayoutAnimation(
+        LayoutAnimationType.LAYOUT,
+        this.props.layout,
+        prevProps.layout
+      );
+      this._configureLayoutAnimation(
+        LayoutAnimationType.EXITING,
+        this.props.exiting,
+        prevProps.exiting
+      );
+
       if (
         this.props.sharedTransitionTag !== undefined ||
         prevProps.sharedTransitionTag !== undefined
@@ -488,10 +480,9 @@ export function createAnimatedComponent(
         saveSnapshot(this._componentDOMRef);
       }
 
-      // Snapshot won't be undefined because it comes from getSnapshotBeforeUpdate method
       if (
         IS_WEB &&
-        snapshot !== null &&
+        snapshot &&
         this.props.layout &&
         !getReducedMotionFromConfig(this.props.layout as CustomConfig)
       ) {
@@ -503,22 +494,33 @@ export function createAnimatedComponent(
       }
     }
 
-    _configureLayoutTransition() {
-      if (IS_WEB) {
+    _configureLayoutAnimation(
+      type: LayoutAnimationType,
+      currentConfig: LayoutAnimationOrBuilder | undefined,
+      previousConfig?: LayoutAnimationOrBuilder
+    ) {
+      if (IS_WEB || currentConfig === previousConfig) {
         return;
       }
 
-      const layout = this.props.layout;
-      if (layout && getReducedMotionFromConfig(layout as CustomConfig)) {
-        return;
+      if (this._isReducedMotion(currentConfig)) {
+        if (!previousConfig) {
+          return;
+        }
+        currentConfig = undefined;
       }
+
       updateLayoutAnimations(
-        this.getComponentViewTag(),
-        LayoutAnimationType.LAYOUT,
-        layout &&
+        isFabric() && type === LayoutAnimationType.ENTERING
+          ? this.reanimatedID
+          : this.getComponentViewTag(),
+        type,
+        currentConfig &&
           maybeBuild(
-            layout,
-            undefined /* We don't have to warn user if style has common properties with animation for LAYOUT */,
+            currentConfig,
+            type === LayoutAnimationType.LAYOUT
+              ? undefined /* We don't have to warn user if style has common properties with animation for LAYOUT */
+              : this.props?.style,
             AnimatedComponent.displayName
           )
       );
@@ -584,7 +586,6 @@ export function createAnimatedComponent(
           // if ref is changed, reset viewInfo
           this._viewInfo = undefined;
         }
-        const tag = this.getComponentViewTag();
 
         const { layout, entering, exiting, sharedTransitionTag } = this.props;
         if (layout || entering || exiting || sharedTransitionTag) {
@@ -595,52 +596,39 @@ export function createAnimatedComponent(
           if (sharedTransitionTag) {
             this._configureSharedTransition();
           }
-          if (exiting && isFabric()) {
-            const reduceMotionInExiting =
-              'getReduceMotion' in exiting &&
-              typeof exiting.getReduceMotion === 'function'
-                ? getReduceMotionFromConfig(exiting.getReduceMotion())
-                : getReduceMotionFromConfig();
-            if (!reduceMotionInExiting) {
-              updateLayoutAnimations(
-                tag,
-                LayoutAnimationType.EXITING,
-                maybeBuild(
-                  exiting,
-                  this.props?.style,
-                  AnimatedComponent.displayName
-                )
-              );
-            }
-          }
 
           const skipEntering = this.context?.current;
           if (entering && !isFabric() && !skipEntering && !IS_WEB) {
-            updateLayoutAnimations(
-              tag,
+            this._configureLayoutAnimation(
               LayoutAnimationType.ENTERING,
-              maybeBuild(
-                entering,
-                this.props?.style,
-                AnimatedComponent.displayName
-              )
+              this.props.entering
             );
           }
         }
       },
     });
 
+    _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.
     getSnapshotBeforeUpdate() {
       if (
         IS_WEB &&
-        this._componentDOMRef?.getBoundingClientRect !== undefined
+        this.props.layout &&
+        this._componentDOMRef?.getBoundingClientRect
       ) {
         return this._componentDOMRef.getBoundingClientRect();
       }
 
+      // `getSnapshotBeforeUpdate` has to return value which is not `undefined`.
       return null;
     }
 

package/src/helperTypes.ts

@@ -7,7 +7,7 @@ until time comes to refactor the code and get necessary types right.
 This will not be easy though! 
 */
 
-import type { RegisteredStyle, StyleProp } from 'react-native';
+import type { StyleProp } from 'react-native';
 
 import type {
   AnimatedStyle,
@@ -144,10 +144,5 @@ export type AdaptTransforms<T> = {
 /** @deprecated Please use {@link TransformArrayItem} type instead. */
 export type TransformStyleTypes = TransformArrayItem;
 
-/** @deprecated This type is no longer relevant. */
-export type AnimatedStyleProp<T> =
-  | AnimatedStyle<T>
-  | RegisteredStyle<AnimatedStyle<T>>;
-
 /** @deprecated Please use {@link AnimatedProps} type instead. */
 export type AnimateProps<Props extends object> = AnimatedProps<Props>;

package/src/hook/commonTypes.ts

@@ -27,13 +27,18 @@ export interface Descriptor {
   shadowNodeWrapper: ShadowNodeWrapper;
 }
 
+export type MaybeObserverCleanup = (() => void) | undefined;
+
+export type AnimatedRefObserver = (tag: number | null) => MaybeObserverCleanup;
+
 export interface AnimatedRef<T extends Component> {
   (component?: T):
     | number // Paper
     | ShadowNodeWrapper // Fabric
     | HTMLElement; // web
   current: T | null;
-  getTag: () => number;
+  observe: (observer: AnimatedRefObserver) => void;
+  getTag?: () => number | null;
 }
 
 // Might make that type generic if it's ever needed.
@@ -44,10 +49,10 @@ export type AnimatedRefOnUI = {
   (): number | ShadowNodeWrapper | null;
   /**
    * @remarks
-   *   `viewName` is required only on iOS with Paper and it's value is null on
-   *   other platforms.
+   *   `viewName` is required only on iOS/macOS with Paper and is undefined on
+   *   other platforms
    */
-  viewName: SharedValue<string | null>;
+  viewName?: SharedValue<string | null>;
 };
 
 type ReanimatedPayload = {

package/src/hook/useAnimatedRef.ts

@@ -1,19 +1,23 @@
 'use strict';
 import type { Component } from 'react';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import type { FlatList, ScrollView } from 'react-native';
-import { Platform } from 'react-native';
 
 import type { ShadowNodeWrapper } from '../commonTypes';
 import { getShadowNodeWrapperFromRef } from '../fabricUtils';
-import { isFabric, isWeb } from '../PlatformChecker';
+import { makeMutable } from '../mutables';
+import { isFabric, isIOS, isMacOS, shouldBeUseWeb } from '../PlatformChecker';
 import { findNodeHandle } from '../platformFunctions/findNodeHandle';
 import { shareableMappingCache } from '../shareableMappingCache';
 import { makeShareableCloneRecursive } from '../shareables';
-import type { AnimatedRef, AnimatedRefOnUI } from './commonTypes';
-import { useSharedValue } from './useSharedValue';
+import type {
+  AnimatedRef,
+  AnimatedRefObserver,
+  AnimatedRefOnUI,
+  MaybeObserverCleanup,
+} from './commonTypes';
 
-const IS_WEB = isWeb();
+const SHOULD_BE_USE_WEB = shouldBeUseWeb();
 
 interface MaybeScrollableComponent extends Component {
   getNativeScrollRef?: FlatList['getNativeScrollRef'];
@@ -26,26 +30,22 @@ interface MaybeScrollableComponent extends Component {
 }
 
 function getComponentOrScrollable(component: MaybeScrollableComponent) {
-  if (isFabric() && component.getNativeScrollRef) {
+  if (component.getNativeScrollRef) {
     return component.getNativeScrollRef();
-  } else if (!isFabric() && component.getScrollableNode) {
+  }
+  if (component.getScrollableNode) {
     return component.getScrollableNode();
   }
   return component;
 }
 
-/**
- * Lets you get a reference of a view that you can use inside a worklet.
- *
- * @returns An object with a `.current` property which contains an instance of a
- *   component.
- * @see https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedRef
- */
-export function useAnimatedRef<
-  TComponent extends Component,
->(): AnimatedRef<TComponent> {
-  const tag = useSharedValue<number | ShadowNodeWrapper | null>(-1);
-  const viewName = useSharedValue<string | null>(null);
+function useAnimatedRefBase<TComponent extends Component>(
+  getWrapper: (component: TComponent) => ShadowNodeWrapper | number | null
+): AnimatedRef<TComponent> {
+  const observers = useRef<Map<AnimatedRefObserver, MaybeObserverCleanup>>(
+    new Map()
+  ).current;
+  const tagOrWrapperRef = useRef<ShadowNodeWrapper | number | null>(-1);
 
   const ref = useRef<AnimatedRef<TComponent> | null>(null);
 
@@ -53,49 +53,108 @@ export function useAnimatedRef<
     const fun: AnimatedRef<TComponent> = <AnimatedRef<TComponent>>((
       component
     ) => {
-      // enters when ref is set by attaching to a component
       if (component) {
-        const getTagValueFunction = isFabric()
-          ? getShadowNodeWrapperFromRef
-          : findNodeHandle;
-
-        const getTagOrShadowNodeWrapper = () => {
-          return IS_WEB
-            ? getComponentOrScrollable(component)
-            : getTagValueFunction(getComponentOrScrollable(component));
-        };
-
-        tag.value = getTagOrShadowNodeWrapper();
-
-        // On Fabric we have to unwrap the tag from the shadow node wrapper
-        fun.getTag = isFabric()
-          ? () => findNodeHandle(getComponentOrScrollable(component))
-          : getTagOrShadowNodeWrapper;
+        tagOrWrapperRef.current = getWrapper(component);
 
+        // We have to unwrap the tag from the shadow node wrapper.
+        fun.getTag = () => findNodeHandle(getComponentOrScrollable(component));
         fun.current = component;
-        // viewName is required only on iOS with Paper
-        if (Platform.OS === 'ios' && !isFabric()) {
-          viewName.value =
-            (component as MaybeScrollableComponent)?.viewConfig
-              ?.uiViewClassName || 'RCTView';
+
+        if (observers.size) {
+          const currentTag = fun?.getTag?.() ?? null;
+          observers.forEach((cleanup, observer) => {
+            // Perform the cleanup before calling the observer again.
+            // This ensures that all events that were set up in the observer
+            // are cleaned up before the observer sets up new events during
+            // the next call.
+            cleanup?.();
+            observers.set(observer, observer(currentTag));
+          });
         }
       }
-      return tag.value;
+
+      return tagOrWrapperRef.current;
     });
 
+    fun.observe = (observer: AnimatedRefObserver) => {
+      // Call observer immediately to get the initial value
+      const cleanup = observer(fun?.getTag?.() ?? null);
+      observers.set(observer, cleanup);
+
+      return () => {
+        observers.get(observer)?.();
+        observers.delete(observer);
+      };
+    };
+
     fun.current = null;
+    ref.current = fun;
+  }
+
+  return ref.current;
+}
+
+const IS_APPLE = isIOS() || isMacOS();
 
+function useAnimatedRefNative<
+  TComponent extends Component,
+>(): AnimatedRef<TComponent> {
+  const [viewName] = useState(() =>
+    // viewName is required only on iOS/MacOS with Paper
+    !isFabric() && IS_APPLE ? makeMutable<string | null>(null) : null
+  );
+  const [tagOrWrapper] = useState(() =>
+    makeMutable<ShadowNodeWrapper | number | null>(null)
+  );
+
+  const ref = useAnimatedRefBase<TComponent>((component) => {
+    const getTagOrWrapper = isFabric()
+      ? getShadowNodeWrapperFromRef
+      : findNodeHandle;
+
+    tagOrWrapper.value = getTagOrWrapper(getComponentOrScrollable(component));
+
+    if (viewName) {
+      viewName.value =
+        (component as MaybeScrollableComponent)?.viewConfig?.uiViewClassName ||
+        'RCTView';
+    }
+
+    return tagOrWrapper.value;
+  });
+
+  if (!shareableMappingCache.get(ref)) {
     const animatedRefShareableHandle = makeShareableCloneRecursive({
       __init: () => {
         'worklet';
-        const f: AnimatedRefOnUI = () => tag.value;
-        f.viewName = viewName;
+        const f: AnimatedRefOnUI = () => tagOrWrapper.value;
+        if (viewName) {
+          f.viewName = viewName;
+        }
         return f;
       },
     });
-    shareableMappingCache.set(fun, animatedRefShareableHandle);
-    ref.current = fun;
+    shareableMappingCache.set(ref, animatedRefShareableHandle);
   }
 
-  return ref.current;
+  return ref;
+}
+
+function useAnimatedRefWeb<
+  TComponent extends Component,
+>(): AnimatedRef<TComponent> {
+  return useAnimatedRefBase<TComponent>((component) =>
+    getComponentOrScrollable(component)
+  );
 }
+
+/**
+ * Lets you get a reference of a view that you can use inside a worklet.
+ *
+ * @returns An object with a `.current` property which contains an instance of a
+ *   component.
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedRef
+ */
+export const useAnimatedRef = SHOULD_BE_USE_WEB
+  ? useAnimatedRefWeb
+  : useAnimatedRefNative;

package/src/hook/useHandler.ts

@@ -2,6 +2,8 @@
 import { useEffect, useRef } from 'react';
 
 import type { WorkletFunction } from '../commonTypes';
+import { isWorkletFunction } from '../commonTypes';
+import { ReanimatedError } from '../errors';
 import { isJest, isWeb } from '../PlatformChecker';
 import { makeShareable } from '../shareables';
 import type { DependencyList, ReanimatedEvent } from './commonTypes';
@@ -83,6 +85,14 @@ export function useHandler<
 
   const { context, savedDependencies } = initRef.current;
 
+  for (const handlerName in handlers) {
+    if (!isWorkletFunction(handlers[handlerName])) {
+      throw new ReanimatedError(
+        'Passed a function that is not a worklet. Please provide a worklet function.'
+      );
+    }
+  }
+
   dependencies = buildDependencies(
     dependencies,
     handlers as Record<string, WorkletFunction | undefined>

package/src/hook/useScrollViewOffset.ts

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef } from 'react';
 
 import type { SharedValue } from '../commonTypes';
 import type { AnimatedScrollView } from '../component/ScrollView';
+import { logger } from '../logger';
 import { isWeb } from '../PlatformChecker';
 import type {
   AnimatedRef,
@@ -15,6 +16,9 @@ import { useSharedValue } from './useSharedValue';
 
 const IS_WEB = isWeb();
 
+const NOT_INITIALIZED_WARNING =
+  'animatedRef is not initialized in useScrollViewOffset. Make sure to pass the animated ref to the scrollable component to get scroll offset updates.';
+
 /**
  * Lets you synchronously get the current offset of a `ScrollView`.
  *
@@ -43,27 +47,27 @@ function useScrollViewOffsetWeb(
       offset.value =
         element.scrollLeft === 0 ? element.scrollTop : element.scrollLeft;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animatedRef, animatedRef?.current]);
+  }, [animatedRef, offset]);
 
   useEffect(() => {
-    const element = animatedRef?.current
-      ? getWebScrollableElement(animatedRef.current)
-      : null;
+    if (!animatedRef) {
+      return;
+    }
+
+    return animatedRef.observe((tag) => {
+      if (!tag) {
+        logger.warn(NOT_INITIALIZED_WARNING);
+        return;
+      }
 
-    if (element) {
+      const element = getWebScrollableElement(animatedRef.current);
       element.addEventListener('scroll', eventHandler);
-    }
-    return () => {
-      if (element) {
+
+      return () => {
         element.removeEventListener('scroll', eventHandler);
-      }
-    };
-    // React here has a problem with `animatedRef.current` since a Ref .current
-    // field shouldn't be used as a dependency. However, in this case we have
-    // to do it this way.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animatedRef, animatedRef?.current, eventHandler]);
+      };
+    });
+  }, [animatedRef, eventHandler]);
 
   return offset;
 }
@@ -89,21 +93,22 @@ function useScrollViewOffsetNative(
   ) as unknown as EventHandlerInternal<ReanimatedScrollEvent>;
 
   useEffect(() => {
-    const elementTag = animatedRef?.getTag() ?? null;
-
-    if (elementTag) {
-      eventHandler.workletEventHandler.registerForEvents(elementTag);
+    if (!animatedRef) {
+      return;
     }
-    return () => {
-      if (elementTag) {
-        eventHandler.workletEventHandler.unregisterFromEvents(elementTag);
+
+    return animatedRef.observe((tag) => {
+      if (!tag) {
+        logger.warn(NOT_INITIALIZED_WARNING);
+        return;
       }
-    };
-    // React here has a problem with `animatedRef.current` since a Ref .current
-    // field shouldn't be used as a dependency. However, in this case we have
-    // to do it this way.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animatedRef, animatedRef?.current, eventHandler]);
+
+      eventHandler.workletEventHandler.registerForEvents(tag);
+      return () => {
+        eventHandler.workletEventHandler.unregisterFromEvents(tag);
+      };
+    });
+  }, [animatedRef, eventHandler]);
 
   return offset;
 }

package/src/hook/utils.ts

@@ -1,5 +1,6 @@
 'use strict';
 import type { WorkletFunction } from '../commonTypes';
+import { isWorkletFunction } from '../commonTypes';
 import { ReanimatedError } from '../errors';
 import type { DependencyList } from './commonTypes';
 
@@ -27,19 +28,34 @@ export function buildDependencies(
     (handler) => handler !== undefined
   ) as NonNullable<Handler>[];
   if (!dependencies) {
-    dependencies = handlersList.map((handler) => {
-      return {
-        workletHash: handler.__workletHash,
-        closure: handler.__closure,
-      };
-    });
-  } else {
-    dependencies.push(buildWorkletsHash(handlersList));
+    return handlersList;
   }
 
+  dependencies.push(buildWorkletsHash(handlersList));
   return dependencies;
 }
 
+function areWorkletsEqual(
+  worklet1: WorkletFunction,
+  worklet2: WorkletFunction
+) {
+  if (worklet1.__workletHash === worklet2.__workletHash) {
+    const closure1Keys = Object.keys(worklet1.__closure);
+    const closure2Keys = Object.keys(worklet2.__closure);
+
+    return (
+      closure1Keys.length === closure2Keys.length &&
+      closure1Keys.every(
+        (key) =>
+          key in worklet2.__closure &&
+          worklet1.__closure[key] === worklet2.__closure[key]
+      )
+    );
+  }
+
+  return false;
+}
+
 // This is supposed to work as useEffect comparison.
 export function areDependenciesEqual(
   nextDependencies: DependencyList,
@@ -61,8 +77,17 @@ export function areDependenciesEqual(
     if (!nextDeps || !prevDeps || prevDeps.length !== nextDeps.length) {
       return false;
     }
+
     for (let i = 0; i < prevDeps.length; ++i) {
-      if (!objectIs(nextDeps[i], prevDeps[i])) {
+      const nextDep = nextDeps[i];
+      const prevDep = prevDeps[i];
+      if (objectIs(nextDep, prevDep)) {
+        continue;
+      }
+      if (!isWorkletFunction(nextDep) || !isWorkletFunction(prevDep)) {
+        return false;
+      }
+      if (!areWorkletsEqual(nextDep, prevDep)) {
         return false;
       }
     }