Dispatch commands to both UIManagers from both renderers (#17211)

* Dispatch commands to both UIManagers from both renderers

* Merge test files

packages/react-native-renderer/src/ReactFabric.js

@@ -29,6 +29,9 @@ 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';
@@ -39,8 +42,6 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';
 import getComponentName from 'shared/getComponentName';
 import warningWithoutStack from 'shared/warningWithoutStack';
 
-const {dispatchCommand: fabricDispatchCommand} = nativeFabricUIManager;
-
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
 function findNodeHandle(componentOrHandle: any): ?number {
@@ -110,23 +111,24 @@ const ReactFabric: ReactFabricType = {
   findNodeHandle,
 
   dispatchCommand(handle: any, command: string, args: Array<any>) {
-    const invalid =
-      handle._nativeTag == null || handle._internalInstanceHandle == null;
-
-    if (invalid) {
+    if (handle._nativeTag == null) {
       warningWithoutStack(
-        !invalid,
+        handle._nativeTag != null,
         "dispatchCommand was called with a ref that isn't a " +
           'native component. Use React.forwardRef to get access to the underlying native component',
       );
       return;
     }
 
-    fabricDispatchCommand(
-      handle._internalInstanceHandle.stateNode.node,
-      command,
-      args,
-    );
+    if (handle._internalInstanceHandle) {
+      nativeFabricUIManager.dispatchCommand(
+        handle._internalInstanceHandle.stateNode.node,
+        command,
+        args,
+      );
+    } else {
+      UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args);
+    }
   },
 
   render(element: React$Element<any>, containerTag: any, callback: ?Function) {

packages/react-native-renderer/src/ReactNativeRenderer.js

@@ -129,7 +129,15 @@ const ReactNativeRenderer: ReactNativeType = {
       return;
     }
 
-    UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args);
+    if (handle._internalInstanceHandle) {
+      nativeFabricUIManager.dispatchCommand(
+        handle._internalInstanceHandle.stateNode.node,
+        command,
+        args,
+      );
+    } else {
+      UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args);
+    }
   },
 
   render(element: React$Element<any>, containerTag: any, callback: ?Function) {

packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js

@@ -16,7 +16,7 @@ let ReactNative;
 let UIManager;
 let createReactNativeComponentClass;
 
-describe('ReactFabric', () => {
+describe('created with ReactFabric called with ReactNative', () => {
   beforeEach(() => {
     jest.resetModules();
     require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager');
@@ -55,7 +55,7 @@ describe('ReactFabric', () => {
   });
 
   it('dispatches commands on Fabric nodes with the RN renderer', () => {
-    UIManager.dispatchViewManagerCommand.mockReset();
+    nativeFabricUIManager.dispatchCommand.mockClear();
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {title: true},
       uiViewClassName: 'RCTView',
@@ -64,13 +64,75 @@ describe('ReactFabric', () => {
     let ref = React.createRef();
 
     ReactFabric.render(<View title="bar" ref={ref} />, 11);
-    expect(UIManager.dispatchViewManagerCommand).not.toBeCalled();
+    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 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 <View title="foo" />;
+      }
+    }
+
+    ReactNative.render(<Component ref={ref} />, 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},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let ref = React.createRef();
+
+    ReactNative.render(<View title="bar" ref={ref} />, 11);
+    expect(UIManager.dispatchViewManagerCommand).not.toBeCalled();
+    ReactFabric.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();
   });
 });