Reintroduce onReanimatedPropsChange

src/JSPropUpdater.ts

@@ -0,0 +1,65 @@
+import {
+  NativeEventEmitter,
+  NativeModules,
+  findNodeHandle,
+} from 'react-native';
+import { nativeShouldBeMock } from './reanimated2/PlatformChecker';
+import { StyleProps } from './reanimated2';
+
+interface ListenerData {
+  viewTag: number;
+  props: StyleProps;
+}
+
+export class JSPropUpdater {
+  private static _tagToComponentMapping = new Map();
+  private _reanimatedEventEmitter: NativeEventEmitter;
+  private static _reanimatedModuleMock = {
+    async addListener(): Promise<void> {
+      // noop
+    },
+    async removeListeners(): Promise<void> {
+      // noop
+    },
+  };
+
+  private static _listener(data: ListenerData) {
+    const component = JSPropUpdater._tagToComponentMapping.get(data.viewTag);
+    component && component._updateFromNative(data.props);
+  }
+
+  constructor() {
+    let reanimatedModule: typeof JSPropUpdater._reanimatedModuleMock;
+    if (nativeShouldBeMock()) {
+      reanimatedModule = JSPropUpdater._reanimatedModuleMock;
+    } else {
+      reanimatedModule = NativeModules.ReanimatedModule;
+    }
+    this._reanimatedEventEmitter = new NativeEventEmitter(reanimatedModule);
+  }
+
+  public addOnJSPropsChangeListener(
+    animatedComponent: React.Component<unknown, unknown>
+  ) {
+    const viewTag = findNodeHandle(animatedComponent);
+    JSPropUpdater._tagToComponentMapping.set(viewTag, animatedComponent);
+    if (JSPropUpdater._tagToComponentMapping.size === 1) {
+      this._reanimatedEventEmitter.addListener(
+        'onReanimatedPropsChange',
+        JSPropUpdater._listener
+      );
+    }
+  }
+
+  public removeOnJSPropsChangeListener(
+    animatedComponent: React.Component<unknown, unknown>
+  ) {
+    const viewTag = findNodeHandle(animatedComponent);
+    JSPropUpdater._tagToComponentMapping.delete(viewTag);
+    if (JSPropUpdater._tagToComponentMapping.size === 0) {
+      this._reanimatedEventEmitter.removeAllListeners(
+        'onReanimatedPropsChange'
+      );
+    }
+  }
+}

src/createAnimatedComponent.tsx

@@ -53,6 +53,7 @@ import NativeReanimatedModule from './reanimated2/NativeReanimated';
 import { isSharedValue } from './reanimated2';
 import type { AnimateProps } from './reanimated2/helperTypes';
 import { removeFromPropsRegistry } from './reanimated2/PropsRegistry';
+import { JSPropUpdater } from './JSPropUpdater';
 
 function dummyListener() {
   // empty listener we use to assign to listener properties for which animated
@@ -286,6 +287,7 @@ export default function createAnimatedComponent(
     _inlinePropsMapperId: number | null = null;
     _inlineProps: StyleProps = {};
     _sharedElementTransition: SharedTransition | null = null;
+    _JSPropUpdater = new JSPropUpdater();
     static displayName: string;
 
     constructor(props: AnimatedComponentProps<InitialComponentProps>) {
@@ -297,13 +299,15 @@ export default function createAnimatedComponent(
 
     componentWillUnmount() {
       this._detachNativeEvents();
+      this._JSPropUpdater.removeOnJSPropsChangeListener(this);
       this._detachStyles();
       this._detachInlineProps();
       this._sharedElementTransition?.unregisterTransition(this._viewTag);
     }
 
     componentDidMount() {
       this._attachNativeEvents();
+      this._JSPropUpdater.addOnJSPropsChangeListener(this);
       this._attachAnimatedStyles();
       this._attachInlineProps();
     }