Support findNodeHandle in Fabric (#12573)

This doesn't actually need to share any state because it goes through
the instance to the fiber structure. Since Fabric is on the same version
as RN, calling it on either renderer works.

Author: sebmarkbage

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

@@ -24,11 +24,11 @@ import ReactFabricRenderer from './ReactFabricRenderer';
 import ReactNativePropRegistry from './ReactNativePropRegistry';
 import {getInspectorDataForViewTag} from './ReactNativeFiberInspector';
 import createReactNativeComponentClass from './createReactNativeComponentClass';
-import {injectFindHostInstanceFabric} from './findNodeHandle';
+import {injectFindHostInstance} from './findNodeHandle';
 import findNumericNodeHandle from './findNumericNodeHandle';
 import takeSnapshot from './takeSnapshot';
 
-injectFindHostInstanceFabric(ReactFabricRenderer.findHostInstance);
+injectFindHostInstance(ReactFabricRenderer.findHostInstance);
 
 ReactGenericBatching.injection.injectRenderer(ReactFabricRenderer);
 

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

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+'use strict';
+
+let React;
+let ReactFabric;
+let ReactNative;
+let createReactNativeComponentClass;
+
+describe('ReactFabric', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    ReactNative = require('react-native-renderer');
+    jest.resetModules();
+    jest.mock('shared/ReactFeatureFlags', () =>
+      require('shared/forks/ReactFeatureFlags.native-fabric'),
+    );
+
+    React = require('react');
+    ReactFabric = require('react-native-renderer/fabric');
+    createReactNativeComponentClass = require('../createReactNativeComponentClass')
+      .default;
+  });
+
+  it('find Fabric nodes with the RN renderer', () => {
+    const View = createReactNativeComponentClass('View', () => ({
+      validAttributes: {title: true},
+      uiViewClassName: 'View',
+    }));
+
+    let ref = React.createRef();
+
+    class Component extends React.Component {
+      render() {
+        return <View title="foo" />;
+      }
+    }
+
+    ReactFabric.render(<Component ref={ref} />, 11);
+
+    let handle = ReactNative.findNodeHandle(ref.current);
+    expect(handle).toBe(2);
+  });
+});

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

@@ -15,25 +15,14 @@ import getComponentName from 'shared/getComponentName';
 import invariant from 'fbjs/lib/invariant';
 import warning from 'fbjs/lib/warning';
 
-// TODO: Share this module between Fabric and React Native renderers
-// so that both can be used in the same tree.
-
 let findHostInstance = function(fiber: Fiber): any {
   return null;
 };
 
-let findHostInstanceFabric = function(fiber: Fiber): any {
-  return null;
-};
-
 export function injectFindHostInstance(impl: (fiber: Fiber) => any) {
   findHostInstance = impl;
 }
 
-export function injectFindHostInstanceFabric(impl: (fiber: Fiber) => any) {
-  findHostInstanceFabric = impl;
-}
-
 /**
  * ReactNative vs ReactWeb
  * -----------------------
@@ -98,24 +87,11 @@ function findNodeHandle(componentOrHandle: any): any {
   // ReactInstanceMap.get here will always succeed for mounted components
   const internalInstance: Fiber = ReactInstanceMap.get(component);
   if (internalInstance) {
-    return (
-      findHostInstance(internalInstance) ||
-      findHostInstanceFabric(internalInstance)
-    );
+    return findHostInstance(internalInstance);
   } else {
     if (component) {
       return component;
     } else {
-      invariant(
-        // Native
-        (typeof component === 'object' && '_nativeTag' in component) ||
-          // Composite
-          (component.render != null && typeof component.render === 'function'),
-        'findNodeHandle(...): Argument is not a component ' +
-          '(type: %s, keys: %s)',
-        typeof component,
-        Object.keys(component),
-      );
       invariant(
         false,
         'findNodeHandle(...): Unable to find node handle for unmounted ' +

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

@@ -21,5 +21,8 @@ export default function findNumericNodeHandleFiber(
   if (instance == null || typeof instance === 'number') {
     return instance;
   }
+  if (instance.canonical) {
+    return instance.canonical._nativeTag;
+  }
   return instance._nativeTag;
 }