react-native-reanimated 3.8.0 → 3.9.0-layout-animation-experimental

package/src/createAnimatedComponent/createAnimatedComponent.tsx

@@ -8,7 +8,7 @@ import type {
 } from 'react';
 import React from 'react';
 import { findNodeHandle, Platform } from 'react-native';
-import WorkletEventHandler from '../reanimated2/WorkletEventHandler';
+import { WorkletEventHandler } from '../reanimated2/WorkletEventHandler';
 import '../reanimated2/layoutReanimation/animationsManager';
 import invariant from 'invariant';
 import { adaptViewConfig } from '../ConfigHelper';
@@ -55,9 +55,9 @@ import { updateLayoutAnimations } from '../reanimated2/UpdateLayoutAnimations';
 import type { CustomConfig } from '../reanimated2/layoutReanimation/web/config';
 import type { FlatList, FlatListProps } from 'react-native';
 import { addHTMLMutationObserver } from '../reanimated2/layoutReanimation/web/domUtils';
+import { getViewInfo } from './getViewInfo';
 
 const IS_WEB = isWeb();
-const IS_FABRIC = isFabric();
 
 if (IS_WEB) {
   configureWebLayoutAnimations();
@@ -106,6 +106,8 @@ export function createAnimatedComponent(
   options?: Options<any>
 ): ComponentClass<AnimateProps<FlatListProps<unknown>>>;
 
+let id = 0;
+
 export function createAnimatedComponent(
   Component: ComponentType<InitialComponentProps>,
   options?: Options<InitialComponentProps>
@@ -134,15 +136,25 @@ export function createAnimatedComponent(
     static displayName: string;
     static contextType = SkipEnteringContext;
     context!: React.ContextType<typeof SkipEnteringContext>;
+    nativeID = id++;
 
     constructor(props: AnimatedComponentProps<InitialComponentProps>) {
       super(props);
       if (isJest()) {
         this.jestAnimatedStyle = { value: {} };
       }
+      const entering = this.props.entering;
+      if (entering) {
+        updateLayoutAnimations(
+          this.nativeID,
+          LayoutAnimationType.ENTERING,
+          maybeBuild(entering, this.props?.style, AnimatedComponent.displayName)
+        );
+      }
     }
 
     componentDidMount() {
+      this._viewTag = this._getViewInfo().viewTag as number;
       this._attachNativeEvents();
       this._jsPropsUpdater.addOnJSPropsChangeListener(this);
       this._attachAnimatedStyles();
@@ -181,11 +193,15 @@ export function createAnimatedComponent(
       this._jsPropsUpdater.removeOnJSPropsChangeListener(this);
       this._detachStyles();
       this._InlinePropManager.detachInlineProps();
-      this._sharedElementTransition?.unregisterTransition(this._viewTag);
+      if (this.props.sharedTransitionTag) {
+        this._configureSharedTransition(true);
+      }
+      this._sharedElementTransition?.unregisterTransition(this._viewTag, true);
 
       const exiting = this.props.exiting;
       if (
         IS_WEB &&
+        this._component &&
         this.props.exiting &&
         !getReducedMotionFromConfig(this.props.exiting as CustomConfig)
       ) {
@@ -225,21 +241,13 @@ export function createAnimatedComponent(
     }
 
     _attachNativeEvents() {
-      const node = this._getEventViewRef() as AnimatedComponentRef;
-      let viewTag = null; // We set it only if needed
-
       for (const key in this.props) {
         const prop = this.props[key];
         if (
           has('workletEventHandler', prop) &&
           prop.workletEventHandler instanceof WorkletEventHandler
         ) {
-          if (viewTag === null) {
-            viewTag = IS_WEB
-              ? this._component
-              : findNodeHandle(options?.setNativeProps ? this : node);
-          }
-          prop.workletEventHandler.registerForEvents(viewTag as number, key);
+          prop.workletEventHandler.registerForEvents(this._viewTag, key);
         }
       }
     }
@@ -251,7 +259,7 @@ export function createAnimatedComponent(
           has('workletEventHandler', prop) &&
           prop.workletEventHandler instanceof WorkletEventHandler
         ) {
-          prop.workletEventHandler.unregisterFromEvents();
+          prop.workletEventHandler.unregisterFromEvents(this._viewTag);
         }
       }
     }
@@ -268,44 +276,46 @@ export function createAnimatedComponent(
         if (this.props.animatedProps?.viewDescriptors) {
           this.props.animatedProps.viewDescriptors.remove(this._viewTag);
         }
-        if (IS_FABRIC) {
+        if (isFabric()) {
           removeFromPropsRegistry(this._viewTag);
         }
       }
     }
 
-    _reattachNativeEvents(
+    _updateNativeEvents(
       prevProps: AnimatedComponentProps<InitialComponentProps>
     ) {
       for (const key in prevProps) {
-        const prop = this.props[key];
+        const prevProp = prevProps[key];
         if (
-          has('workletEventHandler', prop) &&
-          prop.workletEventHandler instanceof WorkletEventHandler &&
-          prop.workletEventHandler.reattachNeeded
+          has('workletEventHandler', prevProp) &&
+          prevProp.workletEventHandler instanceof WorkletEventHandler
         ) {
-          prop.workletEventHandler.unregisterFromEvents();
+          const newProp = this.props[key];
+          if (!newProp) {
+            // Prop got deleted
+            prevProp.workletEventHandler.unregisterFromEvents(this._viewTag);
+          } else if (
+            has('workletEventHandler', newProp) &&
+            newProp.workletEventHandler instanceof WorkletEventHandler &&
+            newProp.workletEventHandler !== prevProp.workletEventHandler
+          ) {
+            // Prop got changed
+            prevProp.workletEventHandler.unregisterFromEvents(this._viewTag);
+            newProp.workletEventHandler.registerForEvents(this._viewTag);
+          }
         }
       }
 
-      let viewTag = null;
-
       for (const key in this.props) {
-        const prop = this.props[key];
+        const newProp = this.props[key];
         if (
-          has('workletEventHandler', prop) &&
-          prop.workletEventHandler instanceof WorkletEventHandler &&
-          prop.workletEventHandler.reattachNeeded
+          has('workletEventHandler', newProp) &&
+          newProp.workletEventHandler instanceof WorkletEventHandler &&
+          !prevProps[key]
         ) {
-          if (viewTag === null) {
-            const node = this._getEventViewRef() as AnimatedComponentRef;
-
-            viewTag = IS_WEB
-              ? this._component
-              : findNodeHandle(options?.setNativeProps ? this : node);
-          }
-          prop.workletEventHandler.registerForEvents(viewTag as number, key);
-          prop.workletEventHandler.reattachNeeded = false;
+          // Prop got added
+          newProp.workletEventHandler.registerForEvents(this._viewTag);
         }
       }
     }
@@ -349,19 +359,14 @@ export function createAnimatedComponent(
             '[Reanimated] Cannot find host instance for this component. Maybe it renders nothing?'
           );
         }
-        // we can access view tag in the same way it's accessed here https://github.com/facebook/react/blob/e3f4eb7272d4ca0ee49f27577156b57eeb07cf73/packages/react-native-renderer/src/ReactFabric.js#L146
-        viewTag = hostInstance?._nativeTag;
-        /**
-         * RN uses viewConfig for components for storing different properties of the component(example: https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent.js#L24).
-         * The name we're looking for is in the field named uiViewClassName.
-         */
-        viewName = hostInstance?.viewConfig?.uiViewClassName;
-
-        viewConfig = hostInstance?.viewConfig;
-
-        if (IS_FABRIC) {
-          shadowNodeWrapper = getShadowNodeWrapperFromRef(this);
-        }
+
+        const viewInfo = getViewInfo(hostInstance);
+        viewTag = viewInfo.viewTag;
+        viewName = viewInfo.viewName;
+        viewConfig = viewInfo.viewConfig;
+        shadowNodeWrapper = isFabric()
+          ? getShadowNodeWrapperFromRef(this)
+          : null;
       }
       this._viewInfo = { viewTag, viewName, shadowNodeWrapper, viewConfig };
       return this._viewInfo;
@@ -456,7 +461,13 @@ export function createAnimatedComponent(
       if (layout !== oldLayout) {
         this._configureLayoutTransition();
       }
-      this._reattachNativeEvents(prevProps);
+      if (
+        this.props.sharedTransitionTag !== undefined ||
+        prevProps.sharedTransitionTag !== undefined
+      ) {
+        this._configureSharedTransition();
+      }
+      this._updateNativeEvents(prevProps);
       this._attachAnimatedStyles();
       this._InlinePropManager.attachInlineProps(this, this._getViewInfo());
 
@@ -490,6 +501,31 @@ export function createAnimatedComponent(
       updateLayoutAnimations(this._viewTag, LayoutAnimationType.LAYOUT, layout);
     }
 
+    _configureSharedTransition(isUnmounting = false) {
+      if (IS_WEB) {
+        return;
+      }
+      const { sharedTransitionTag } = this.props;
+      if (!sharedTransitionTag) {
+        this._sharedElementTransition?.unregisterTransition(
+          this._viewTag,
+          isUnmounting
+        );
+        this._sharedElementTransition = null;
+        return;
+      }
+      const sharedElementTransition =
+        this.props.sharedTransitionStyle ??
+        this._sharedElementTransition ??
+        new SharedTransition();
+      sharedElementTransition.registerTransition(
+        this._viewTag,
+        sharedTransitionTag,
+        isUnmounting
+      );
+      this._sharedElementTransition = sharedElementTransition;
+    }
+
     _setComponentRef = setAndForwardRef<Component | HTMLElement>({
       getForwardedRef: () =>
         this.props.forwardedRef as MutableRefObject<
@@ -502,6 +538,8 @@ export function createAnimatedComponent(
           ? (ref as HTMLElement)
           : findNodeHandle(ref as Component);
 
+        this._viewTag = tag as number;
+
         const { layout, entering, exiting, sharedTransitionTag } = this.props;
         if (
           (layout || entering || exiting || sharedTransitionTag) &&
@@ -511,17 +549,8 @@ export function createAnimatedComponent(
             enableLayoutAnimations(true, false);
           }
 
-          const skipEntering = this.context?.current;
-          if (entering && !skipEntering) {
-            updateLayoutAnimations(
-              tag as number,
-              LayoutAnimationType.ENTERING,
-              maybeBuild(
-                entering,
-                this.props?.style,
-                AnimatedComponent.displayName
-              )
-            );
+          if (sharedTransitionTag) {
+            this._configureSharedTransition();
           }
           if (sharedTransitionTag && !IS_WEB) {
             const sharedElementTransition =
@@ -537,6 +566,24 @@ export function createAnimatedComponent(
               this._sharedElementTransition = sharedElementTransition;
             }
           }
+          if (exiting) {
+            const reduceMotionInExiting =
+              'getReduceMotion' in exiting &&
+              typeof exiting.getReduceMotion === 'function'
+                ? getReduceMotionFromConfig(exiting.getReduceMotion())
+                : getReduceMotionFromConfig();
+            if (!reduceMotionInExiting) {
+              updateLayoutAnimations(
+                tag as number,
+                LayoutAnimationType.EXITING,
+                maybeBuild(
+                  exiting,
+                  this.props?.style,
+                  AnimatedComponent.displayName
+                )
+              );
+            }
+          }
         }
 
         if (ref !== this._component) {
@@ -589,6 +636,7 @@ export function createAnimatedComponent(
 
       return (
         <Component
+          nativeID={`${this.nativeID}`}
           {...filteredProps}
           // Casting is used here, because ref can be null - in that case it cannot be assigned to HTMLElement.
           // After spending some time trying to figure out what to do with this problem, we decided to leave it this way

package/src/createAnimatedComponent/getViewInfo.ts

@@ -0,0 +1,39 @@
+'use strict';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+// This is a makeshift solution to handle both 0.73 and 0.74 versions of React Native.
+
+export let getViewInfo = (element: any) => {
+  if (element._nativeTag !== undefined && element.__nativeTag !== null) {
+    getViewInfo = getViewInfo73;
+    return getViewInfo73(element);
+  } else if (
+    element.__nativeTag !== undefined &&
+    element.__nativeTag !== null
+  ) {
+    getViewInfo = getViewInfoLatest;
+    return getViewInfoLatest(element);
+  }
+  return getViewInfo73(element);
+};
+
+function getViewInfo73(element: any) {
+  return {
+    // we can access view tag in the same way it's accessed here https://github.com/facebook/react/blob/e3f4eb7272d4ca0ee49f27577156b57eeb07cf73/packages/react-native-renderer/src/ReactFabric.js#L146
+    viewName: element?.viewConfig?.uiViewClassName,
+    /**
+     * RN uses viewConfig for components for storing different properties of the component(example: https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent.js#L24).
+     * The name we're looking for is in the field named uiViewClassName.
+     */
+    viewTag: element?._nativeTag,
+    viewConfig: element?.viewConfig,
+  };
+}
+
+function getViewInfoLatest(element: any) {
+  return {
+    viewName: element?._viewConfig?.uiViewClassName,
+    viewTag: element?.__nativeTag,
+    viewConfig: element?._viewConfig,
+  };
+}

package/src/mock.ts

@@ -17,6 +17,11 @@ import {
   ColorSpace,
   Extrapolation,
   SharedTransitionType,
+  withReanimatedTimer,
+  advanceAnimationByTime,
+  advanceAnimationByFrame,
+  setUpTests,
+  getAnimatedStyle,
 } from './reanimated2';
 import {
   View as ViewRN,
@@ -391,7 +396,13 @@ const pluginUtils = {
   // getUseOfValueInStyleWarning: ADD ME IF NEEDED
 };
 
-// const jestUtils = ADD ME IF NEEDED
+const jestUtils = {
+  withReanimatedTimer,
+  advanceAnimationByTime,
+  advanceAnimationByFrame,
+  setUpTests,
+  getAnimatedStyle,
+};
 
 const LayoutAnimationConfig = {
   // LayoutAnimationConfig: ADD ME IF NEEDED
@@ -431,6 +442,7 @@ const Reanimated = {
   ...isSharedValue,
   ...commonTypes,
   ...pluginUtils,
+  ...jestUtils,
   ...LayoutAnimationConfig,
   ...mappers,
 };

package/src/reanimated2/NativeReanimated/NativeReanimated.ts

@@ -1,21 +1,26 @@
 'use strict';
-import { NativeModules } from 'react-native';
-import type { ShareableRef, Value3D, ValueRotation } from '../commonTypes';
 import type {
-  LayoutAnimationFunction,
-  LayoutAnimationType,
-} from '../layoutReanimation';
+  ShadowNodeWrapper,
+  Value3D,
+  ValueRotation,
+  ShareableRef,
+} from '../commonTypes';
 import { checkCppVersion } from '../platform-specific/checkCppVersion';
 import { jsVersion } from '../platform-specific/jsVersion';
 import type { WorkletRuntime } from '../runtimes';
 import { getValueUnpackerCode } from '../valueUnpacker';
+import { isFabric } from '../PlatformChecker';
+import type React from 'react';
+import { getShadowNodeWrapperFromRef } from '../fabricUtils';
 import type { LayoutAnimationBatchItem } from '../layoutReanimation/animationBuilder/commonTypes';
+import ReanimatedModule from '../../specs/NativeReanimatedModule';
 
 // this is the type of `__reanimatedModuleProxy` which is injected using JSI
 export interface NativeReanimatedModule {
   makeShareableClone<T>(
     value: T,
-    shouldPersistRemote: boolean
+    shouldPersistRemote: boolean,
+    nativeStateSource?: object
   ): ShareableRef<T>;
   scheduleOnUI<T>(shareable: ShareableRef<T>): void;
   executeOnUIRuntimeSync<T, R>(shareable: ShareableRef<T>): R;
@@ -34,7 +39,7 @@ export interface NativeReanimatedModule {
   ): number;
   unregisterEventHandler(id: number): void;
   getViewProp<T>(
-    viewTag: number,
+    viewTagOrShadowNodeWrapper: number | ShadowNodeWrapper,
     propName: string,
     callback?: (result: T) => void
   ): Promise<T>;
@@ -52,18 +57,8 @@ export interface NativeReanimatedModule {
     isStatusBarTranslucent: boolean
   ): number;
   unsubscribeFromKeyboardEvents(listenerId: number): void;
-  configureLayoutAnimation(
-    viewTag: number,
-    type: LayoutAnimationType,
-    sharedTransitionTag: string,
-    config: ShareableRef<Keyframe | LayoutAnimationFunction>
-  ): void;
   configureLayoutAnimationBatch(
-    layoutAnimationsBatch: {
-      viewTag: number;
-      type: LayoutAnimationType;
-      config: ShareableRef<Keyframe | LayoutAnimationFunction> | undefined;
-    }[]
+    layoutAnimationsBatch: LayoutAnimationBatchItem[]
   ): void;
   setShouldAnimateExitingForTag(viewTag: number, shouldAnimate: boolean): void;
 }
@@ -90,7 +85,6 @@ export class NativeReanimated {
     }
     global._REANIMATED_VERSION_JS = jsVersion;
     if (global.__reanimatedModuleProxy === undefined) {
-      const { ReanimatedModule } = NativeModules;
       const valueUnpackerCode = getValueUnpackerCode();
       ReanimatedModule?.installTurboModule(valueUnpackerCode);
     }
@@ -106,10 +100,15 @@ See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooti
     this.InnerNativeModule = global.__reanimatedModuleProxy;
   }
 
-  makeShareableClone<T>(value: T, shouldPersistRemote: boolean) {
+  makeShareableClone<T>(
+    value: T,
+    shouldPersistRemote: boolean,
+    nativeStateSource?: object
+  ) {
     return this.InnerNativeModule.makeShareableClone(
       value,
-      shouldPersistRemote
+      shouldPersistRemote,
+      nativeStateSource
     );
   }
 
@@ -172,23 +171,22 @@ See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooti
   getViewProp<T>(
     viewTag: number,
     propName: string,
+    component: React.Component | undefined, // required on Fabric
     callback?: (result: T) => void
   ) {
-    return this.InnerNativeModule.getViewProp(viewTag, propName, callback);
-  }
+    let shadowNodeWrapper;
+    if (isFabric()) {
+      shadowNodeWrapper = getShadowNodeWrapperFromRef(
+        component as React.Component
+      );
+      return this.InnerNativeModule.getViewProp(
+        shadowNodeWrapper,
+        propName,
+        callback
+      );
+    }
 
-  configureLayoutAnimation(
-    viewTag: number,
-    type: LayoutAnimationType,
-    sharedTransitionTag: string,
-    config: ShareableRef<Keyframe | LayoutAnimationFunction>
-  ) {
-    this.InnerNativeModule.configureLayoutAnimation(
-      viewTag,
-      type,
-      sharedTransitionTag,
-      config
-    );
+    return this.InnerNativeModule.getViewProp(viewTag, propName, callback);
   }
 
   configureLayoutAnimationBatch(

package/src/reanimated2/PlatformChecker.ts

@@ -12,8 +12,9 @@ export function isJest(): boolean {
 // `isChromeDebugger` also returns true in Jest environment, so `isJest()` check should always be performed first
 export function isChromeDebugger(): boolean {
   return (
-    !(global as localGlobal).nativeCallSyncHook ||
-    !!(global as localGlobal).__REMOTEDEV__
+    (!(global as localGlobal).nativeCallSyncHook ||
+      !!(global as localGlobal).__REMOTEDEV__) &&
+    !(global as localGlobal).RN$Bridgeless
   );
 }
 

package/src/reanimated2/PropsRegistry.ts

@@ -2,8 +2,6 @@
 import { isFabric } from './PlatformChecker';
 import { runOnUI } from './threads';
 
-const IS_FABRIC = isFabric();
-
 let VIEW_TAGS: number[] = [];
 
 export function removeFromPropsRegistry(viewTag: number) {
@@ -14,7 +12,7 @@ export function removeFromPropsRegistry(viewTag: number) {
 }
 
 function flush() {
-  if (__DEV__ && !IS_FABRIC) {
+  if (__DEV__ && !isFabric()) {
     throw new Error('[Reanimated] PropsRegistry is only available on Fabric.');
   }
   runOnUI(removeFromPropsRegistryOnUI)(VIEW_TAGS);

package/src/reanimated2/UpdateLayoutAnimations.ts

@@ -8,29 +8,59 @@ import type {
   LayoutAnimationFunction,
   LayoutAnimationType,
 } from './layoutReanimation';
-import type { LayoutAnimationBatchItem } from './layoutReanimation/animationBuilder/commonTypes';
+import type {
+  LayoutAnimationBatchItem,
+  ProgressAnimationCallback,
+  SharedTransitionAnimationsFunction,
+} from './layoutReanimation/animationBuilder/commonTypes';
 
 function createUpdateManager() {
   const animations: LayoutAnimationBatchItem[] = [];
+  // When a stack is rerendered we reconfigure all the shared elements.
+  // To do that we want them to appear in our batch in the correct order,
+  // so we defer some of the updates to appear at the end of the batch.
+  const deferredAnimations: LayoutAnimationBatchItem[] = [];
 
   return {
-    update(batchItem: LayoutAnimationBatchItem) {
-      animations.push(batchItem);
-      if (animations.length === 1) {
-        setImmediate(this.flush);
+    update(batchItem: LayoutAnimationBatchItem, isUnmounting?: boolean) {
+      if (isUnmounting) {
+        deferredAnimations.push(batchItem);
+      } else {
+        animations.push(batchItem);
+      }
+      if (animations.length + deferredAnimations.length === 1) {
+        // setImmediate(this.flush);
+        this.flush();
       }
     },
     flush(this: void) {
-      configureLayoutAnimationBatch(animations);
+      configureLayoutAnimationBatch(animations.concat(deferredAnimations));
       animations.length = 0;
+      deferredAnimations.length = 0;
     },
   };
 }
 
+/**
+ * Lets you update the current configuration of the layout animation or shared element transition for a given component.
+ * Configurations are batched and applied at the end of the current execution block, right before sending the response back to native.
+ *
+ * @param viewTag - The tag of the component you'd like to configure.
+ * @param type - The type of the animation you'd like to configure - {@link LayoutAnimationType}.
+ * @param config - The animation configuration - {@link LayoutAnimationFunction}, {@link SharedTransitionAnimationsFunction}, {@link ProgressAnimationCallback} or {@link Keyframe}. Passing `undefined` will remove the animation.
+ * @param sharedTransitionTag - The tag of the shared element transition you'd like to configure. Passing `undefined` will remove the transition.
+ * @param isUnmounting - Determines whether the configuration should be included at the end of the batch, after all the non-deferred configurations (even those that were updated later). This is used to retain the correct ordering of shared elements. Defaults to `false`.
+ */
 export let updateLayoutAnimations: (
   viewTag: number,
   type: LayoutAnimationType,
-  config?: Keyframe | LayoutAnimationFunction
+  config?:
+    | Keyframe
+    | LayoutAnimationFunction
+    | SharedTransitionAnimationsFunction
+    | ProgressAnimationCallback,
+  sharedTransitionTag?: string,
+  isUnmounting?: boolean
 ) => void;
 
 if (shouldBeUseWeb()) {
@@ -39,10 +69,20 @@ if (shouldBeUseWeb()) {
   };
 } else {
   const updateLayoutAnimationsManager = createUpdateManager();
-  updateLayoutAnimations = (viewTag, type, config) =>
-    updateLayoutAnimationsManager.update({
-      viewTag,
-      type,
-      config: config ? makeShareableCloneRecursive(config) : undefined,
-    });
+  updateLayoutAnimations = (
+    viewTag,
+    type,
+    config,
+    sharedTransitionTag,
+    isUnmounting
+  ) =>
+    updateLayoutAnimationsManager.update(
+      {
+        viewTag,
+        type,
+        config: config ? makeShareableCloneRecursive(config) : undefined,
+        sharedTransitionTag,
+      },
+      isUnmounting
+    );
 }