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.
Sebastian Markbåge committed
Apr 7, 2018 at 22:33 UTC
bc753a716e185c31d8eb7404ab5dd6ee7467b7cb
4 files changed
+58
-27
packages/react-native-renderer/src/ReactFabric.js
+2
-2
@@ -24,11 +24,11 @@ import ReactFabricRenderer from './ReactFabricRenderer';
24
import ReactNativePropRegistry from './ReactNativePropRegistry';
25
import {getInspectorDataForViewTag} from './ReactNativeFiberInspector';
26
import createReactNativeComponentClass from './createReactNativeComponentClass';
27
-import {injectFindHostInstanceFabric} from './findNodeHandle';
27
+import {injectFindHostInstance} from './findNodeHandle';
28
import findNumericNodeHandle from './findNumericNodeHandle';
29
import takeSnapshot from './takeSnapshot';
30
31
-injectFindHostInstanceFabric(ReactFabricRenderer.findHostInstance);
31
+injectFindHostInstance(ReactFabricRenderer.findHostInstance);
32
33
ReactGenericBatching.injection.injectRenderer(ReactFabricRenderer);
34
packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js
new
+52
@@ -0,0 +1,52 @@
1
+/**
2
+ * Copyright (c) 2013-present, Facebook, Inc.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @emails react-core
8
+ * @jest-environment node
9
+ */
10
+
11
+'use strict';
12
+
13
+let React;
14
+let ReactFabric;
15
+let ReactNative;
16
+let createReactNativeComponentClass;
17
+
18
+describe('ReactFabric', () => {
19
+ beforeEach(() => {
20
+ jest.resetModules();
21
+ ReactNative = require('react-native-renderer');
22
+ jest.resetModules();
23
+ jest.mock('shared/ReactFeatureFlags', () =>
24
+ require('shared/forks/ReactFeatureFlags.native-fabric'),
25
+ );
26
+
27
+ React = require('react');
28
+ ReactFabric = require('react-native-renderer/fabric');
29
+ createReactNativeComponentClass = require('../createReactNativeComponentClass')
30
+ .default;
31
+ });
32
+
33
+ it('find Fabric nodes with the RN renderer', () => {
34
+ const View = createReactNativeComponentClass('View', () => ({
35
+ validAttributes: {title: true},
36
+ uiViewClassName: 'View',
37
+ }));
38
+
39
+ let ref = React.createRef();
40
+
41
+ class Component extends React.Component {
42
+ render() {
43
+ return <View title="foo" />;
44
+ }
45
+ }
46
+
47
+ ReactFabric.render(<Component ref={ref} />, 11);
48
+
49
+ let handle = ReactNative.findNodeHandle(ref.current);
50
+ expect(handle).toBe(2);
51
+ });
52
+});
packages/react-native-renderer/src/findNodeHandle.js
+1
-25
@@ -15,25 +15,14 @@ import getComponentName from 'shared/getComponentName';
15
import invariant from 'fbjs/lib/invariant';
16
import warning from 'fbjs/lib/warning';
17
18
-// TODO: Share this module between Fabric and React Native renderers
19
-// so that both can be used in the same tree.
20
-
18
let findHostInstance = function(fiber: Fiber): any {
19
return null;
20
};
21
25
-let findHostInstanceFabric = function(fiber: Fiber): any {
26
- return null;
27
-};
28
-
22
export function injectFindHostInstance(impl: (fiber: Fiber) => any) {
23
findHostInstance = impl;
24
}
25
33
-export function injectFindHostInstanceFabric(impl: (fiber: Fiber) => any) {
34
- findHostInstanceFabric = impl;
35
-}
36
-
26
/**
27
* ReactNative vs ReactWeb
28
* -----------------------
@@ -98,24 +87,11 @@ function findNodeHandle(componentOrHandle: any): any {
87
// ReactInstanceMap.get here will always succeed for mounted components
88
const internalInstance: Fiber = ReactInstanceMap.get(component);
89
if (internalInstance) {
101
- return (
102
- findHostInstance(internalInstance) ||
103
- findHostInstanceFabric(internalInstance)
104
- );
90
+ return findHostInstance(internalInstance);
91
} else {
92
if (component) {
93
return component;
94
} else {
109
- invariant(
110
- // Native
111
- (typeof component === 'object' && '_nativeTag' in component) ||
112
- // Composite
113
- (component.render != null && typeof component.render === 'function'),
114
- 'findNodeHandle(...): Argument is not a component ' +
115
- '(type: %s, keys: %s)',
116
- typeof component,
117
- Object.keys(component),
118
- );
95
invariant(
96
false,
97
'findNodeHandle(...): Unable to find node handle for unmounted ' +
packages/react-native-renderer/src/findNumericNodeHandle.js
+3
@@ -21,5 +21,8 @@ export default function findNumericNodeHandleFiber(
21
if (instance == null || typeof instance === 'number') {
22
return instance;
23
}
24
+ if (instance.canonical) {
25
+ return instance.canonical._nativeTag;
26
+ }
27
return instance._nativeTag;
28
}