Fabric-compatible implementation of JSReponder feature (#20768)

shergin · web-flow · commit 78d2f2d3015e · 2021-02-22T16:50:03.000-05:00
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.
diff --git 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
@@ -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
@@ -179,6 +179,7 @@ declare var nativeFabricUIManager: {
     locationY: number,
     callback: (Fiber) => void,
   ) => void,
+  setIsJSResponder: (node: Node, isJsResponder: boolean) => void,
   ...
 };
 
