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

package/lib/typescript/reanimated2/core.d.ts

@@ -1,6 +1,6 @@
+/// <reference types="react" />
 import type { AnimatedKeyboardOptions, SensorConfig, SensorType, SharedValue, Value3D, ValueRotation } from './commonTypes';
-import type { LayoutAnimationFunction, LayoutAnimationType } from './layoutReanimation';
-import type { LayoutAnimationBatchItem, ProgressAnimationCallback, SharedTransitionAnimationsFunction } from './layoutReanimation/animationBuilder/commonTypes';
+import type { LayoutAnimationBatchItem } from './layoutReanimation/animationBuilder/commonTypes';
 export { startMapper, stopMapper } from './mappers';
 export { runOnJS, runOnUI, executeOnUIRuntimeSync } from './threads';
 export { createWorkletRuntime, runOnRuntime } from './runtimes';
@@ -19,7 +19,7 @@ export declare const isReanimated3: () => boolean;
  * @returns `true` in Reanimated 3, doesn't exist in Reanimated 2
  */
 export declare const isConfigured: () => boolean;
-export declare function getViewProp<T>(viewTag: number, propName: string): Promise<T>;
+export declare function getViewProp<T>(viewTag: number, propName: string, component?: React.Component): Promise<T>;
 export declare function registerEventHandler<T>(eventHandler: (event: T) => void, eventName: string, emitterReactTag?: number): number;
 export declare function unregisterEventHandler(id: number): void;
 export declare function subscribeForKeyboardEvents(eventHandler: (state: number, height: number) => void, options: AnimatedKeyboardOptions): number;
@@ -28,7 +28,6 @@ export declare function registerSensor(sensorType: SensorType, config: SensorCon
 export declare function initializeSensor(sensorType: SensorType, config: SensorConfig): SharedValue<Value3D | ValueRotation>;
 export declare function unregisterSensor(sensorId: number): void;
 export declare function enableLayoutAnimations(flag: boolean, isCallByUser?: boolean): void;
-export declare function configureLayoutAnimations(viewTag: number | HTMLElement, type: LayoutAnimationType, config: LayoutAnimationFunction | Keyframe | SharedTransitionAnimationsFunction | ProgressAnimationCallback, sharedTransitionTag?: string): void;
 export declare function configureLayoutAnimationBatch(layoutAnimationsBatch: LayoutAnimationBatchItem[]): void;
 export declare function setShouldAnimateExitingForTag(viewTag: number | HTMLElement, shouldAnimate: boolean): void;
 export declare function jsiConfigureProps(uiProps: string[], nativeProps: string[]): void;

package/lib/typescript/reanimated2/hook/commonTypes.d.ts

@@ -12,6 +12,7 @@ export interface Descriptor {
 export interface AnimatedRef<T extends Component> {
     (component?: T): number | ShadowNodeWrapper | HTMLElement;
     current: T | null;
+    getTag: () => number;
 }
 export type AnimatedRefOnJS = AnimatedRef<Component>;
 /**
@@ -44,6 +45,11 @@ export type NativeEventWrapper<Event extends object> = {
 export type DefaultStyle = ViewStyle | ImageStyle | TextStyle;
 export type RNNativeScrollEvent = NativeSyntheticEvent<NativeScrollEvent>;
 export type ReanimatedScrollEvent = ReanimatedEvent<RNNativeScrollEvent>;
+export interface IWorkletEventHandler<Event extends object> {
+    updateEventHandler: (newWorklet: (event: ReanimatedEvent<Event>) => void, newEvents: string[]) => void;
+    registerForEvents: (viewTag: number, fallbackEventName?: string) => void;
+    unregisterFromEvents: (viewTag: number) => void;
+}
 export interface AnimatedStyleHandle<Style extends DefaultStyle = DefaultStyle> {
     viewDescriptors: ViewDescriptorsSet;
     initial: {

package/lib/typescript/reanimated2/hook/useEvent.d.ts

@@ -1,12 +1,11 @@
-import WorkletEventHandler from '../WorkletEventHandler';
-import type { ReanimatedEvent } from './commonTypes';
+import type { IWorkletEventHandler, ReanimatedEvent } from './commonTypes';
 /**
  * Worklet to provide as an argument to `useEvent` hook.
  */
 export type EventHandler<Event extends object, Context extends Record<string, unknown> = never> = (event: ReanimatedEvent<Event>, context?: Context) => void;
 export type EventHandlerProcessed<Event extends object, Context extends Record<string, unknown> = never> = (event: Event, context?: Context) => void;
 export type EventHandlerInternal<Event extends object> = {
-    workletEventHandler: WorkletEventHandler<Event>;
+    workletEventHandler: IWorkletEventHandler<Event>;
 };
 /**
  * Lets you run a function whenever a specified native event occurs.

package/lib/typescript/reanimated2/hook/useScrollViewOffset.d.ts

@@ -8,4 +8,6 @@ import type { AnimatedRef } from './commonTypes';
  * @returns A shared value which holds the current offset of the `ScrollView`.
  * @see https://docs.swmansion.com/react-native-reanimated/docs/scroll/useScrollViewOffset
  */
-export declare function useScrollViewOffset(animatedRef: AnimatedRef<AnimatedScrollView>, initialRef?: SharedValue<number>): SharedValue<number>;
+export declare const useScrollViewOffset: typeof useScrollViewOffsetWeb;
+declare function useScrollViewOffsetWeb(animatedRef: AnimatedRef<AnimatedScrollView>, providedOffset?: SharedValue<number>): SharedValue<number>;
+export {};

package/lib/typescript/reanimated2/index.d.ts

@@ -29,7 +29,10 @@ export type { FrameInfo } from './frameCallback';
 export { getUseOfValueInStyleWarning } from './pluginUtils';
 export { withReanimatedTimer, advanceAnimationByTime, advanceAnimationByFrame, setUpTests, getAnimatedStyle, } from './jestUtils';
 export { LayoutAnimationConfig } from './component/LayoutAnimationConfig';
+export { PerformanceMonitor } from './component/PerformanceMonitor';
 export type { Adaptable, AdaptTransforms, AnimateProps, AnimatedProps, AnimatedTransform, TransformStyleTypes, TransformArrayItem, AnimateStyle, AnimatedStyle, AnimatedStyleProp, StylesOrDefault, } from './helperTypes';
 export type { AnimatedScrollViewProps } from './component/ScrollView';
 export type { FlatListPropsWithLayout } from './component/FlatList';
 export { startMapper, stopMapper } from './mappers';
+export { startScreenTransition, finishScreenTransition, ScreenTransition, } from './screenTransition';
+export type { AnimatedScreenTransition, GoBackGesture, ScreenTransitionConfig, } from './screenTransition';

package/lib/typescript/reanimated2/js-reanimated/JSReanimated.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ShareableRef, Value3D, ValueRotation } from '../commonTypes';
 import { SensorType } from '../commonTypes';
 import type { WebSensor } from './WebSensor';
@@ -13,7 +14,6 @@ export default class JSReanimated {
     registerEventHandler<T>(_eventHandler: ShareableRef<T>, _eventName: string, _emitterReactTag: number): number;
     unregisterEventHandler(_: number): void;
     enableLayoutAnimations(): void;
-    configureLayoutAnimation(): void;
     configureLayoutAnimationBatch(): void;
     setShouldAnimateExitingForTag(): void;
     registerSensor(sensorType: SensorType, interval: number, _iosReferenceFrame: number, eventHandler: ShareableRef<(data: Value3D | ValueRotation) => void>): number;
@@ -24,7 +24,7 @@ export default class JSReanimated {
     initializeSensor(sensorType: SensorType, interval: number): WebSensor;
     getSensorName(sensorType: SensorType): string;
     detectPlatform(): void;
-    getViewProp<T>(_viewTag: number, _propName: string, _callback?: (result: T) => void): Promise<T>;
+    getViewProp<T>(_viewTag: number, _propName: string, _component?: React.Component, _callback?: (result: T) => void): Promise<T>;
     configureProps(): void;
     executeOnUIRuntimeSync<T, R>(_shareable: ShareableRef<T>): R;
 }

package/lib/typescript/reanimated2/layoutReanimation/animationBuilder/commonTypes.d.ts

@@ -89,6 +89,7 @@ export type StylePropsWithArrayTransform = StyleProps & {
 export interface LayoutAnimationBatchItem {
     viewTag: number;
     type: LayoutAnimationType;
-    config: ShareableRef<Keyframe | LayoutAnimationFunction> | undefined;
+    config: ShareableRef<Keyframe | LayoutAnimationFunction | SharedTransitionAnimationsFunction | ProgressAnimationCallback> | undefined;
+    sharedTransitionTag?: string;
 }
 export {};

package/lib/typescript/reanimated2/layoutReanimation/sharedTransitions/ProgressTransitionManager.d.ts

@@ -3,13 +3,13 @@ export declare class ProgressTransitionManager {
     private _sharedElementCount;
     private _eventHandler;
     addProgressAnimation(viewTag: number, progressAnimation: ProgressAnimation): void;
-    removeProgressAnimation(viewTag: number): void;
+    removeProgressAnimation(viewTag: number, isUnmounting?: boolean): void;
     private registerEventHandlers;
     private unregisterEventHandlers;
 }
 declare function createProgressTransitionRegister(): {
     addProgressAnimation: (viewTag: number, progressAnimation: ProgressAnimation) => void;
-    removeProgressAnimation: (viewTag: number) => void;
+    removeProgressAnimation: (viewTag: number, isUnmounting: boolean) => void;
     onTransitionStart: (viewTag: number, snapshot: Partial<SharedTransitionAnimationsValues>) => void;
     frame: (progress: number) => void;
     onAndroidFinishTransitioning: () => void;

package/lib/typescript/reanimated2/layoutReanimation/sharedTransitions/SharedTransition.d.ts

@@ -23,8 +23,8 @@ export declare class SharedTransition {
     duration(duration: number): SharedTransition;
     reduceMotion(_reduceMotion: ReduceMotion): this;
     defaultTransitionType(transitionType: SharedTransitionType): SharedTransition;
-    registerTransition(viewTag: number, sharedTransitionTag: string): void;
-    unregisterTransition(viewTag: number): void;
+    registerTransition(viewTag: number, sharedTransitionTag: string, isUnmounting?: boolean): void;
+    unregisterTransition(viewTag: number, isUnmounting?: boolean): void;
     getReduceMotion(): ReduceMotion;
     private getTransitionAnimation;
     private getProgressAnimation;

package/lib/typescript/reanimated2/platform-specific/jsVersion.d.ts

@@ -3,4 +3,4 @@
  * with the version used to build the native part of the library in runtime.
  * Remember to keep this in sync with the version declared in `package.json`
  */
-export declare const jsVersion = "3.8.1";
+export declare const jsVersion = "3.9.0-layout-animation-experimental";

package/lib/typescript/reanimated2/screenTransition/RNScreensTurboModule.d.ts

@@ -0,0 +1,2 @@
+import type { RNScreensTurboModuleType } from './commonTypes';
+export declare const RNScreensTurboModule: RNScreensTurboModuleType;

package/lib/typescript/reanimated2/screenTransition/animationManager.d.ts

@@ -0,0 +1,3 @@
+import type { ScreenTransitionConfig } from './commonTypes';
+export declare function startScreenTransition(screenTransitionConfig: ScreenTransitionConfig): void;
+export declare function finishScreenTransition(screenTransitionConfig: ScreenTransitionConfig): void;

package/lib/typescript/reanimated2/screenTransition/commonTypes.d.ts

@@ -0,0 +1,38 @@
+import type { MeasuredDimensions, ShadowNodeWrapper, SharedValue } from '../commonTypes';
+export type PanGestureHandlerEventPayload = {
+    x: number;
+    y: number;
+    absoluteX: number;
+    absoluteY: number;
+    translationX: number;
+    translationY: number;
+    velocityX: number;
+    velocityY: number;
+};
+export type AnimatedScreenTransition = {
+    topScreenStyle: (event: PanGestureHandlerEventPayload, screenDimensions: MeasuredDimensions) => Record<string, unknown>;
+    belowTopScreenStyle: (event: PanGestureHandlerEventPayload, screenDimensions: MeasuredDimensions) => Record<string, unknown>;
+};
+export type GoBackGesture = 'swipeRight' | 'swipeLeft' | 'swipeUp' | 'swipeDown' | 'verticalSwipe' | 'horizontalSwipe' | 'twoDimensionalSwipe';
+export type ScreenTransitionConfig = {
+    stackTag: number;
+    belowTopScreenId: number | ShadowNodeWrapper;
+    topScreenId: number | ShadowNodeWrapper;
+    screenTransition: AnimatedScreenTransition;
+    sharedEvent: SharedValue<PanGestureHandlerEventPayload>;
+    startingGesturePosition: SharedValue<PanGestureHandlerEventPayload>;
+    onFinishAnimation?: () => void;
+    isTransitionCanceled: boolean;
+    goBackGesture: GoBackGesture;
+    screenDimensions: MeasuredDimensions;
+};
+export type RNScreensTurboModuleType = {
+    startTransition: (stackTag: number) => {
+        topScreenId: number | ShadowNodeWrapper;
+        belowTopScreenId: number | ShadowNodeWrapper;
+        canStartTransition: boolean;
+    };
+    updateTransition: (stackTag: number, progress: number) => void;
+    finishTransition: (stackTag: number, isCanceled: boolean) => void;
+};
+export type LockAxis = 'x' | 'y' | undefined;

package/lib/typescript/reanimated2/screenTransition/index.d.ts

@@ -0,0 +1,3 @@
+export { startScreenTransition, finishScreenTransition, } from './animationManager';
+export { ScreenTransition } from './presets';
+export type { AnimatedScreenTransition, GoBackGesture, ScreenTransitionConfig, } from './commonTypes';

package/lib/typescript/reanimated2/screenTransition/presets.d.ts

@@ -0,0 +1,11 @@
+import type { AnimatedScreenTransition } from './commonTypes';
+export declare const ScreenTransition: {
+    SwipeRight: AnimatedScreenTransition;
+    SwipeLeft: AnimatedScreenTransition;
+    SwipeDown: AnimatedScreenTransition;
+    SwipeUp: AnimatedScreenTransition;
+    Horizontal: AnimatedScreenTransition;
+    Vertical: AnimatedScreenTransition;
+    TwoDimensional: AnimatedScreenTransition;
+    SwipeRightFade: AnimatedScreenTransition;
+};

package/lib/typescript/reanimated2/screenTransition/styleUpdater.d.ts

@@ -0,0 +1,3 @@
+import type { PanGestureHandlerEventPayload, ScreenTransitionConfig } from './commonTypes';
+export declare function applyStyleForBelowTopScreen(screenTransitionConfig: ScreenTransitionConfig, event: PanGestureHandlerEventPayload): void;
+export declare function applyStyle(screenTransitionConfig: ScreenTransitionConfig, event: PanGestureHandlerEventPayload): void;

package/lib/typescript/reanimated2/screenTransition/swipeSimulator.d.ts

@@ -0,0 +1,2 @@
+import type { PanGestureHandlerEventPayload, ScreenTransitionConfig, LockAxis } from './commonTypes';
+export declare function getSwipeSimulator(event: PanGestureHandlerEventPayload, screenTransitionConfig: ScreenTransitionConfig, lockAxis?: LockAxis): () => void;

package/lib/typescript/specs/NativeReanimatedModule.d.ts

@@ -0,0 +1,6 @@
+import type { TurboModule } from 'react-native';
+interface Spec extends TurboModule {
+    installTurboModule: (valueUnpackerCode: string) => boolean;
+}
+declare const _default: Spec | null;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "3.8.1",
+  "version": "3.9.0-layout-animation-experimental",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "test": "yarn run format:js && yarn run lint:js && yarn run test:unit",
@@ -18,7 +18,7 @@
     "format:js": "prettier --write --list-different src __tests__ __typetests__",
     "format:plugin": "cd plugin && yarn format && cd ..",
     "format:java": "node ./scripts/format-java.js",
-    "format:ios": "find apple/ -iname *.h -o -iname *.m -o -iname *.mm -o -iname *.cpp | xargs clang-format -i --Werror",
+    "format:ios": "find apple/ -iname \"*.h\" -o -iname \"*.m\" -o -iname \"*.mm\" -o -iname \"*.cpp\" | xargs clang-format -i --Werror",
     "format:android": "find android/src/ -iname *.h -o -iname *.cpp | xargs clang-format -i",
     "format:common": "find Common/ -iname *.h -o -iname *.cpp | xargs clang-format -i",
     "format:docs": "cd docs && yarn format && cd ..",
@@ -30,11 +30,11 @@
     "type:check:tests:0.72+": "./scripts/test-ts.sh __typetests__/0.72+",
     "type:check:tests:legacy": "./scripts/test-ts.sh __typetests__/legacy",
     "type:check:all": "yarn type:check:src && yarn type:check:plugin && ./scripts/test-ts.sh app/src/App.tsx __typetests__/common __typetests__/0.72+ __typetests__/legacy",
-    "prepare": "yarn plugin && bob build && husky install && yarn app",
+    "build": "yarn build:plugin && bob build && husky install && yarn build:app",
+    "build:app": "cd app && yarn install && yarn build",
+    "build:plugin": "cd plugin && yarn install && yarn build",
     "circular_dependency_check": "yarn madge --extensions js,ts,tsx --circular src lib",
-    "use_strict_check": "node ./scripts/validate-use-strict.js",
-    "plugin": "cd plugin && yarn && cd ..",
-    "app": "cd app && yarn && cd .."
+    "use_strict_check": "node ./scripts/validate-use-strict.js"
   },
   "main": "lib/module/index",
   "module": "lib/module/index",
@@ -101,7 +101,10 @@
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/types": "^7.20.0",
-    "@react-native/eslint-config": "^0.72.2",
+    "@react-native/babel-preset": "0.74.81",
+    "@react-native/eslint-config": "0.74.81",
+    "@react-native/metro-config": "0.74.81",
+    "@react-native/typescript-config": "0.74.81",
     "@testing-library/jest-native": "^4.0.4",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/react-native": "^7.1.0",
@@ -113,7 +116,7 @@
     "@types/jest": "^29.0.0",
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.26",
-    "@types/react-test-renderer": "17.0.2",
+    "@types/react-test-renderer": "^17.0.0-0",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
     "@typescript-eslint/rule-tester": "^6.21.0",
@@ -137,24 +140,24 @@
     "eslint-plugin-tsdoc": "^0.2.17",
     "husky": "^7.0.4",
     "jest": "^29.0.0",
-    "lint-staged": "^11.2.0",
+    "lint-staged": "^15.2.2",
     "madge": "^5.0.1",
     "prettier": "^2.5.1",
-    "react": "17.0.2",
-    "react-native": "0.73.4",
+    "react": "18.2.0",
+    "react-native": "0.74.0",
     "react-native-builder-bob": "^0.18.3",
-    "react-native-gesture-handler": "^2.13.2",
+    "react-native-gesture-handler": "^2.16.0",
     "react-native-web": "~0.18.12",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "18.2.0",
     "shelljs": "^0.8.5",
     "ts-prune": "^0.10.3",
     "typescript": "^4.1.3"
   },
   "lint-staged": {
     "*.(js|ts|tsx)": [
-      "eslint",
-      "eslint --quiet --ext '.js,.ts,.tsx' src/",
-      "prettier --write"
+      "yarn eslint",
+      "yarn eslint --quiet --ext '.js,.ts,.tsx' src/",
+      "yarn prettier --write"
     ],
     "plugin/**/*.ts": "yarn lint:plugin",
     "**/*.{h,cpp}": "yarn lint:cpp",
@@ -171,8 +174,17 @@
       "typescript"
     ]
   },
+  "codegenConfig": {
+    "name": "rnreanimated",
+    "type": "modules",
+    "jsSrcsDir": "./src/specs",
+    "android": {
+      "javaPackageName": "com.swmansion.reanimated"
+    }
+  },
   "sideEffects": [
     "./lib/reanimated2/core",
     "./lib/index"
-  ]
+  ],
+  "packageManager": "yarn@4.1.1"
 }

package/plugin/build/plugin.js

@@ -344,7 +344,7 @@ var require_workletFactory = __commonJS({
         sourceMaps: true,
         sourceFileName: state.file.opts.filename
       });
-      codeObject.code = "(" + ((0, types_12.isObjectMethod)(fun) ? "function " : "") + codeObject.code + "\n)";
+      codeObject.code = "(" + (fun.isObjectMethod() ? "function " : "") + codeObject.code + "\n)";
       const transformed = (0, core_1.transformSync)(codeObject.code, {
         filename: state.file.opts.filename,
         presets: workletStringTransformPresets,
@@ -368,7 +368,10 @@ var require_workletFactory = __commonJS({
       if (variables.length > 0) {
         lineOffset -= variables.length + 2;
       }
-      const pathForStringDefinitions = fun.parentPath.isProgram() ? fun : fun.findParent((path) => (0, types_12.isProgram)(path.parentPath));
+      const pathForStringDefinitions = fun.parentPath.isProgram() ? fun : fun.findParent((path) => {
+        var _a, _b;
+        return (_b = (_a = path.parentPath) === null || _a === void 0 ? void 0 : _a.isProgram()) !== null && _b !== void 0 ? _b : false;
+      });
       (0, assert_1.strict)(pathForStringDefinitions, "[Reanimated] `pathForStringDefinitions` is null.");
       (0, assert_1.strict)(pathForStringDefinitions.parentPath, "[Reanimated] `pathForStringDefinitions.parentPath` is null.");
       const initDataId = pathForStringDefinitions.parentPath.scope.generateUidIdentifier(`worklet_${workletHash}_init_data`);
@@ -530,6 +533,8 @@ var require_workletFactoryCall = __commonJS({
       const originalWorkletLocation = path.node.loc;
       if (originalWorkletLocation) {
         workletFactoryCall.callee.loc = {
+          filename: originalWorkletLocation.filename,
+          identifierName: originalWorkletLocation.identifierName,
           start: originalWorkletLocation.start,
           end: originalWorkletLocation.start
         };

package/src/ConfigHelper.ts

@@ -11,7 +11,7 @@ function assertNoOverlapInLists() {
   }
 }
 
-function configureProps(): void {
+export function configureProps(): void {
   assertNoOverlapInLists();
   jsiConfigureProps(
     Object.keys(PropsAllowlists.UI_THREAD_PROPS_WHITELIST),

package/src/createAnimatedComponent/InlinePropManager.ts

@@ -111,9 +111,9 @@ export function hasInlineStyles(style: StyleProps): boolean {
 
 export function getInlineStyle(
   style: Record<string, unknown>,
-  isFirstRender: boolean
+  shouldGetInitialStyle: boolean
 ) {
-  if (isFirstRender) {
+  if (shouldGetInitialStyle) {
     return getInlinePropsUpdate(style);
   }
   const newStyle: StyleProps = {};

package/src/createAnimatedComponent/JSPropsUpdater.ts

@@ -1,9 +1,6 @@
 'use strict';
-import {
-  NativeEventEmitter,
-  NativeModules,
-  findNodeHandle,
-} from 'react-native';
+import { NativeEventEmitter, Platform, findNodeHandle } from 'react-native';
+import type { NativeModule } from 'react-native';
 import { shouldBeUseWeb } from '../reanimated2/PlatformChecker';
 import type { StyleProps } from '../reanimated2';
 import { runOnJS, runOnUIImmediately } from '../reanimated2/threads';
@@ -13,6 +10,7 @@ import type {
   IJSPropsUpdater,
   InitialComponentProps,
 } from './commonTypes';
+import NativeReanimatedModule from '../specs/NativeReanimatedModule';
 
 interface ListenerData {
   viewTag: number;
@@ -27,7 +25,10 @@ class JSPropsUpdaterPaper implements IJSPropsUpdater {
 
   constructor() {
     this._reanimatedEventEmitter = new NativeEventEmitter(
-      NativeModules.ReanimatedModule
+      // NativeEventEmitter only uses this parameter on iOS.
+      Platform.OS === 'ios'
+        ? (NativeReanimatedModule as unknown as NativeModule)
+        : undefined
     );
   }
 

package/src/createAnimatedComponent/JSPropsUpdater.web.ts

@@ -0,0 +1,26 @@
+'use strict';
+import type {
+  AnimatedComponentProps,
+  IAnimatedComponentInternal,
+  InitialComponentProps,
+} from './commonTypes';
+
+export default class JSPropsUpdaterWeb {
+  public addOnJSPropsChangeListener(
+    _animatedComponent: React.Component<
+      AnimatedComponentProps<InitialComponentProps>
+    > &
+      IAnimatedComponentInternal
+  ) {
+    // noop
+  }
+
+  public removeOnJSPropsChangeListener(
+    _animatedComponent: React.Component<
+      AnimatedComponentProps<InitialComponentProps>
+    > &
+      IAnimatedComponentInternal
+  ) {
+    // noop
+  }
+}

package/src/createAnimatedComponent/PropsFilter.tsx

@@ -1,8 +1,10 @@
 'use strict';
-import type { StyleProps } from '../reanimated2';
-import { isSharedValue } from '../reanimated2';
+
+import { shallowEqual } from '../reanimated2/hook/utils';
+import type { StyleProps } from '../reanimated2/commonTypes';
+import { isSharedValue } from '../reanimated2/isSharedValue';
 import { isChromeDebugger } from '../reanimated2/PlatformChecker';
-import WorkletEventHandler from '../reanimated2/WorkletEventHandler';
+import { WorkletEventHandler } from '../reanimated2/WorkletEventHandler';
 import { initialUpdaterRun } from '../reanimated2/animation';
 import { hasInlineStyles, getInlineStyle } from './InlinePropManager';
 import type {
@@ -22,23 +24,32 @@ function dummyListener() {
 
 export class PropsFilter implements IPropsFilter {
   private _initialStyle = {};
+  private _previousProps: React.Component['props'] | null = null;
+  private _requiresNewInitials = true;
 
   public filterNonAnimatedProps(
     component: React.Component<unknown, unknown> & IAnimatedComponentInternal
   ): Record<string, unknown> {
     const inputProps =
       component.props as AnimatedComponentProps<InitialComponentProps>;
+
+    this._maybePrepareForNewInitials(inputProps);
+
     const props: Record<string, unknown> = {};
     for (const key in inputProps) {
       const value = inputProps[key];
       if (key === 'style') {
         const styleProp = inputProps.style;
         const styles = flattenArray<StyleProps>(styleProp ?? []);
+        if (this._requiresNewInitials) {
+          this._initialStyle = {};
+        }
         const processedStyle: StyleProps = styles.map((style) => {
           if (style && style.viewDescriptors) {
             // this is how we recognize styles returned by useAnimatedStyle
+            // TODO - refactor, since `viewsRef` is only present on Web
             style.viewsRef?.add(component);
-            if (component._isFirstRender) {
+            if (this._requiresNewInitials) {
               this._initialStyle = {
                 ...style.initial.value,
                 ...this._initialStyle,
@@ -47,7 +58,7 @@ export class PropsFilter implements IPropsFilter {
             }
             return this._initialStyle;
           } else if (hasInlineStyles(style)) {
-            return getInlineStyle(style, component._isFirstRender);
+            return getInlineStyle(style, this._requiresNewInitials);
           } else {
             return style;
           }
@@ -61,6 +72,7 @@ export class PropsFilter implements IPropsFilter {
           Object.keys(animatedProp.initial.value).forEach((initialValueKey) => {
             props[initialValueKey] =
               animatedProp.initial?.value[initialValueKey];
+            // TODO - refacotr, since `viewsRef` is only present on Web
             animatedProp.viewsRef?.add(component);
           });
         }
@@ -80,13 +92,26 @@ export class PropsFilter implements IPropsFilter {
           props[key] = dummyListener;
         }
       } else if (isSharedValue(value)) {
-        if (component._isFirstRender) {
+        if (this._requiresNewInitials) {
           props[key] = value.value;
         }
       } else if (key !== 'onGestureHandlerStateChange' || !isChromeDebugger()) {
         props[key] = value;
       }
     }
+    this._requiresNewInitials = false;
     return props;
   }
+
+  private _maybePrepareForNewInitials(
+    inputProps: AnimatedComponentProps<InitialComponentProps>
+  ) {
+    if (this._previousProps && inputProps.style) {
+      this._requiresNewInitials = !shallowEqual(
+        this._previousProps,
+        inputProps
+      );
+    }
+    this._previousProps = inputProps;
+  }
 }