fix: only intercept events with waiting handlers

apps/common-app/src/apps/reanimated/examples/RuntimeTests/ReJest/TestRunner/NotificationRegistry.ts

@@ -1,6 +1,6 @@
 import { runOnJS } from 'react-native-reanimated';
 
-const notificationRegistry: Record<string, boolean> = {};
+let notificationRegistry: Record<string, boolean> = {};
 function notifyJS(name: string) {
   notificationRegistry[name] = true;
 }
@@ -25,4 +25,8 @@ export class NotificationRegistry {
       }, 10);
     });
   }
+
+  public resetRegistry() {
+    notificationRegistry = {};
+  }
 }

apps/common-app/src/apps/reanimated/examples/RuntimeTests/ReJest/TestRunner/TestRunner.ts

@@ -127,6 +127,7 @@ export class TestRunner {
 
   private async runTestCase(testSuite: TestSuite, testCase: TestCase) {
     this._callTrackerRegistry.resetRegistry();
+    this._notificationRegistry.resetRegistry();
     this._currentTestCase = testCase;
 
     if (testSuite.beforeEach) {

apps/common-app/src/apps/reanimated/examples/RuntimeTests/RuntimeTestsExample.tsx

@@ -51,6 +51,8 @@ export default function RuntimeTestsExample() {
             require('./tests/core/useDerivedValue/chain.test');
 
             require('./tests/core/useSharedValue/animationsCompilerApi.test');
+
+            require('./tests/core/onLayout.test');
           },
         },
         {

apps/common-app/src/apps/reanimated/examples/RuntimeTests/tests/core/onLayout.test.tsx

@@ -0,0 +1,71 @@
+import { useEffect } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import Animated, { runOnJS, runOnUI, useAnimatedStyle, useEvent, useSharedValue } from 'react-native-reanimated';
+import { describe, expect, notify, render, test, wait, waitForNotify } from '../../ReJest/RuntimeTestsApi';
+
+interface TestResult {
+  height: number;
+  animatedHandlerCalled: boolean;
+}
+
+const TestComponent = ({ result }: { result: TestResult }) => {
+  const height = useSharedValue(styles.smallBox.height);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    result.height = event.nativeEvent.layout.height;
+    if (result.height === 200) {
+      notify('onLayout');
+    }
+  };
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return { height: height.value };
+  });
+
+  useEffect(() => {
+    runOnUI(() => {
+      height.value += 100;
+    })();
+  }, [height]);
+
+  const setAnimatedHandlerCalled = () => {
+    result.animatedHandlerCalled = true;
+    notify('animatedOnLayout');
+  };
+
+  const animatedOnLayout = useEvent(() => {
+    'worklet';
+    runOnJS(setAnimatedHandlerCalled)();
+  }, ['onLayout']);
+
+  return (
+    <View onLayout={onLayout}>
+      <Animated.View style={[styles.smallBox, animatedStyle]} onLayout={animatedOnLayout} />
+    </View>
+  );
+};
+
+describe('onLayout', () => {
+  test('is not intercepted when there are no registered event handlers', async () => {
+    const result = {} as TestResult;
+    await render(<TestComponent result={result} />);
+    await Promise.race([waitForNotify('onLayout'), wait(1000)]);
+    expect(result.height).toBe(200);
+  });
+
+  test('is dispatched to the registered event handler', async () => {
+    const result = {} as TestResult;
+    await render(<TestComponent result={result} />);
+    await Promise.race([waitForNotify('animatedOnLayout'), wait(1000)]);
+    expect(result.animatedHandlerCalled).toBe(true);
+  });
+});
+
+const styles = StyleSheet.create({
+  smallBox: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'pink',
+  },
+});

packages/react-native-reanimated/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.cpp

@@ -743,6 +743,11 @@ bool ReanimatedModuleProxy::handleRawEvent(
   if (eventType.rfind("top", 0) == 0) {
     eventType = "on" + eventType.substr(3);
   }
+
+  if (!isAnyHandlerWaitingForEvent(eventType, tag)) {
+    return false;
+  }
+
   jsi::Runtime &rt =
       workletsModuleProxy_->getUIWorkletRuntime()->getJSIRuntime();
   const auto &eventPayload = rawEvent.eventPayload;