diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 3f38f4740b8c2..3e8608015ea1f 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/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);
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js
new file mode 100644
index 0000000000000..24c31f45eaa02
--- /dev/null
+++ b/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 ;
+ }
+ }
+
+ ReactFabric.render(, 11);
+
+ let handle = ReactNative.findNodeHandle(ref.current);
+ expect(handle).toBe(2);
+ });
+});
diff --git a/packages/react-native-renderer/src/findNodeHandle.js b/packages/react-native-renderer/src/findNodeHandle.js
index 29146e5888c6f..883b45f919fbe 100644
--- a/packages/react-native-renderer/src/findNodeHandle.js
+++ b/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 ' +
diff --git a/packages/react-native-renderer/src/findNumericNodeHandle.js b/packages/react-native-renderer/src/findNumericNodeHandle.js
index d2fe1003deb86..910950c880d90 100644
--- a/packages/react-native-renderer/src/findNumericNodeHandle.js
+++ b/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;
}