Fabric-compatible implementation of JSReponder feature

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.
facebook · Feb 9, 2021 · 17c38d0 · 17c38d0
1 parent 6c526c5
commit 17c38d0
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
@@ -12,11 +12,33 @@ 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/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -88,6 +88,7 @@ export type NativeMethods = {
     onFail?: () => void,
   ): void,
   setNativeProps(nativeProps: Object): void,
+  setIsJSResponder(node: any, isJSResponder: boolean): void,
   ...
 };
 

diff --git a/...erer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js b/...erer/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,
   ...
 };