diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js index 72f6df865dbbc..7582ce7369c73 100644 --- a/packages/react-native-renderer/src/ReactFabric.js +++ b/packages/react-native-renderer/src/ReactFabric.js @@ -29,9 +29,6 @@ import {createPortal} from 'shared/ReactPortal'; import {setBatchingImplementation} from 'legacy-events/ReactGenericBatching'; import ReactVersion from 'shared/ReactVersion'; -// Module provided by RN: -import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'; - import NativeMethodsMixin from './NativeMethodsMixin'; import ReactNativeComponent from './ReactNativeComponent'; import {getClosestInstanceFromNode} from './ReactFabricComponentTree'; @@ -42,6 +39,8 @@ import ReactSharedInternals from 'shared/ReactSharedInternals'; import getComponentName from 'shared/getComponentName'; import warningWithoutStack from 'shared/warningWithoutStack'; +const {dispatchCommand: fabricDispatchCommand} = nativeFabricUIManager; + const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; function findHostInstance_DEPRECATED( @@ -162,24 +161,23 @@ const ReactFabric: ReactFabricType = { findNodeHandle, dispatchCommand(handle: any, command: string, args: Array) { - if (handle._nativeTag == null) { + const invalid = + handle._nativeTag == null || handle._internalInstanceHandle == null; + + if (invalid) { warningWithoutStack( - handle._nativeTag != null, + !invalid, "dispatchCommand was called with a ref that isn't a " + 'native component. Use React.forwardRef to get access to the underlying native component', ); return; } - if (handle._internalInstanceHandle) { - nativeFabricUIManager.dispatchCommand( - handle._internalInstanceHandle.stateNode.node, - command, - args, - ); - } else { - UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args); - } + fabricDispatchCommand( + handle._internalInstanceHandle.stateNode.node, + command, + args, + ); }, render(element: React$Element, containerTag: any, callback: ?Function) { diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js index 8cb1ae810f5de..299d232c314f4 100644 --- a/packages/react-native-renderer/src/ReactNativeRenderer.js +++ b/packages/react-native-renderer/src/ReactNativeRenderer.js @@ -180,15 +180,7 @@ const ReactNativeRenderer: ReactNativeType = { return; } - if (handle._internalInstanceHandle) { - nativeFabricUIManager.dispatchCommand( - handle._internalInstanceHandle.stateNode.node, - command, - args, - ); - } else { - UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args); - } + UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args); }, render(element: React$Element, containerTag: any, callback: ?Function) { diff --git a/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js index 5efeebfd9211d..a951395db829e 100644 --- a/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js @@ -16,7 +16,7 @@ let ReactNative; let UIManager; let createReactNativeComponentClass; -describe('created with ReactFabric called with ReactNative', () => { +describe('ReactFabric', () => { beforeEach(() => { jest.resetModules(); require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager'); @@ -75,86 +75,6 @@ describe('created with ReactFabric called with ReactNative', () => { }); it('dispatches commands on Fabric nodes with the RN renderer', () => { - nativeFabricUIManager.dispatchCommand.mockClear(); - const View = createReactNativeComponentClass('RCTView', () => ({ - validAttributes: {title: true}, - uiViewClassName: 'RCTView', - })); - - let ref = React.createRef(); - - ReactFabric.render(, 11); - expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled(); - ReactNative.dispatchCommand(ref.current, 'myCommand', [10, 20]); - expect(nativeFabricUIManager.dispatchCommand).toHaveBeenCalledTimes(1); - expect(nativeFabricUIManager.dispatchCommand).toHaveBeenCalledWith( - expect.any(Object), - 'myCommand', - [10, 20], - ); - expect(UIManager.dispatchViewManagerCommand).not.toBeCalled(); - }); -}); - -describe('created with ReactNative called with ReactFabric', () => { - beforeEach(() => { - jest.resetModules(); - require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager'); - ReactFabric = require('react-native-renderer/fabric'); - jest.resetModules(); - UIManager = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface') - .UIManager; - jest.mock('shared/ReactFeatureFlags', () => - require('shared/forks/ReactFeatureFlags.native-oss'), - ); - ReactNative = require('react-native-renderer'); - - React = require('react'); - createReactNativeComponentClass = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface') - .ReactNativeViewConfigRegistry.register; - }); - - it('find Paper instances with the Fabric renderer', () => { - const View = createReactNativeComponentClass('RCTView', () => ({ - validAttributes: {title: true}, - uiViewClassName: 'RCTView', - })); - - let ref = React.createRef(); - - class Component extends React.Component { - render() { - return ; - } - } - - ReactNative.render(, 11); - - let instance = ReactFabric.findHostInstance_DEPRECATED(ref.current); - expect(instance._nativeTag).toBe(3); - }); - - it('find Paper nodes with the Fabric renderer', () => { - const View = createReactNativeComponentClass('RCTView', () => ({ - validAttributes: {title: true}, - uiViewClassName: 'RCTView', - })); - - let ref = React.createRef(); - - class Component extends React.Component { - render() { - return ; - } - } - - ReactNative.render(, 11); - - let handle = ReactFabric.findNodeHandle(ref.current); - expect(handle).toBe(3); - }); - - it('dispatches commands on Paper nodes with the Fabric renderer', () => { UIManager.dispatchViewManagerCommand.mockReset(); const View = createReactNativeComponentClass('RCTView', () => ({ validAttributes: {title: true}, @@ -163,16 +83,14 @@ describe('created with ReactNative called with ReactFabric', () => { let ref = React.createRef(); - ReactNative.render(, 11); + ReactFabric.render(, 11); expect(UIManager.dispatchViewManagerCommand).not.toBeCalled(); - ReactFabric.dispatchCommand(ref.current, 'myCommand', [10, 20]); + ReactNative.dispatchCommand(ref.current, 'myCommand', [10, 20]); expect(UIManager.dispatchViewManagerCommand).toHaveBeenCalledTimes(1); expect(UIManager.dispatchViewManagerCommand).toHaveBeenCalledWith( expect.any(Number), 'myCommand', [10, 20], ); - - expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled(); }); });