From 78d2f2d3015e7b4b3f0f7d8ddd07204952c5f8a9 Mon Sep 17 00:00:00 2001
From: Valentin Shergin <shergin@fb.com>
Date: Mon, 22 Feb 2021 15:50:03 -0600
Subject: [PATCH] Fabric-compatible implementation of `JSReponder` feature
 (#20768)

With this change, if a node is a Fabric node, we route the setJSResponder call to FabricUIManager. Native counterpart is already landed. Tested internally as D26241364.
---
 .../src/ReactFabricGlobalResponderHandler.js  | 21 +++++++++++++++----
 .../InitializeNativeFabricUIManager.js        |  1 +
 scripts/flow/react-native-host-hooks.js       |  1 +
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
index 69d0b8ae529c0..12b6d1e92fcec 100644
--- a/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
+++ b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
@@ -12,11 +12,24 @@ import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateI
 
 const ReactFabricGlobalResponderHandler = {
   onChange: function(from: any, to: any, blockNativeResponder: boolean) {
-    if (to !== null) {
-      const tag = to.stateNode.canonical._nativeTag;
-      UIManager.setJSResponder(tag, blockNativeResponder);
+    const fromOrTo = from || to;
+    const isFabric = !!fromOrTo.stateNode.canonical._internalInstanceHandle;
+
+    if (isFabric) {
+      if (from) {
+        nativeFabricUIManager.setIsJSResponder(from.stateNode.node, false);
+      }
+
+      if (to) {
+        nativeFabricUIManager.setIsJSResponder(to.stateNode.node, true);
+      }
     } else {
-      UIManager.clearJSResponder();
+      if (to !== null) {
+        const tag = to.stateNode.canonical._nativeTag;
+        UIManager.setJSResponder(tag, blockNativeResponder);
+      } else {
+        UIManager.clearJSResponder();
+      }
     }
   },
 };
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
index 686dc72702de9..ee3c7df98508d 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
@@ -176,6 +176,7 @@ const RCTFabricUIManager = {
     );
     success(1, 1, 100, 100);
   }),
+  setIsJSResponder: jest.fn(),
 };
 
 global.nativeFabricUIManager = RCTFabricUIManager;
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
index 17cc6fe9c952e..29fed27e52c6b 100644
--- a/scripts/flow/react-native-host-hooks.js
+++ b/scripts/flow/react-native-host-hooks.js
@@ -179,6 +179,7 @@ declare var nativeFabricUIManager: {
     locationY: number,
     callback: (Fiber) => void,
   ) => void,
+  setIsJSResponder: (node: Node, isJsResponder: boolean) => void,
   ...
 };