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; }