diff --git a/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js index 69d0b8ae529c0..efd2149934d37 100644 --- 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 index 8b4ab311bff79..94fd2f1fb5056 100644 --- 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/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, ... };