Skip to content

Commit eb616a1

Browse files
rubennorterubennorte
authored
Extract duplicated methods in Fabric and the legacy renderer to a shared module (facebook#26319)
## Summary The following methods have exactly the same implementation on Fabric and the legacy renderer: * `findHostInstance_DEPRECATED` * `findNodeHandle` * `dispatchCommand` * `sendAccessibilityEvent` This just extracts those functions to a common module so they're easier to change (no need to sync changes in 2 files). ## How did you test this change? Existing tests (this is a refactor).
1 parent 49f7410 commit eb616a1

File tree

3 files changed

+179
-292
lines changed

3 files changed

+179
-292
lines changed

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

Lines changed: 6 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,13 @@
77
* @flow
88
*/
99

10-
import type {HostComponent} from './ReactNativeTypes';
1110
import type {ReactPortal, ReactNodeList} from 'shared/ReactTypes';
1211
import type {ElementRef, Element, ElementType} from 'react';
1312
import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
1413

1514
import './ReactFabricInjection';
1615

1716
import {
18-
findHostInstance,
19-
findHostInstanceWithWarning,
2017
batchedUpdates as batchedUpdatesImpl,
2118
discreteUpdates,
2219
createContainer,
@@ -29,159 +26,19 @@ import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal
2926
import {setBatchingImplementation} from './legacy-events/ReactGenericBatching';
3027
import ReactVersion from 'shared/ReactVersion';
3128

32-
// Modules provided by RN:
33-
import {
34-
UIManager,
35-
legacySendAccessibilityEvent,
36-
} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
37-
3829
import {getClosestInstanceFromNode} from './ReactFabricComponentTree';
3930
import {
4031
getInspectorDataForViewTag,
4132
getInspectorDataForViewAtPoint,
4233
getInspectorDataForInstance,
4334
} from './ReactNativeFiberInspector';
4435
import {LegacyRoot, ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
45-
import ReactSharedInternals from 'shared/ReactSharedInternals';
46-
import getComponentNameFromType from 'shared/getComponentNameFromType';
47-
48-
const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
49-
50-
function findHostInstance_DEPRECATED<TElementType: ElementType>(
51-
componentOrHandle: ?(ElementRef<TElementType> | number),
52-
): ?ElementRef<HostComponent<mixed>> {
53-
if (__DEV__) {
54-
const owner = ReactCurrentOwner.current;
55-
if (owner !== null && owner.stateNode !== null) {
56-
if (!owner.stateNode._warnedAboutRefsInRender) {
57-
console.error(
58-
'%s is accessing findNodeHandle inside its render(). ' +
59-
'render() should be a pure function of props and state. It should ' +
60-
'never access something that requires stale data from the previous ' +
61-
'render, such as refs. Move this logic to componentDidMount and ' +
62-
'componentDidUpdate instead.',
63-
getComponentNameFromType(owner.type) || 'A component',
64-
);
65-
}
66-
67-
owner.stateNode._warnedAboutRefsInRender = true;
68-
}
69-
}
70-
if (componentOrHandle == null) {
71-
return null;
72-
}
73-
// $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
74-
if (componentOrHandle._nativeTag) {
75-
// $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
76-
return componentOrHandle;
77-
}
78-
// $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
79-
if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) {
80-
// $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
81-
return componentOrHandle.canonical;
82-
}
83-
let hostInstance;
84-
if (__DEV__) {
85-
hostInstance = findHostInstanceWithWarning(
86-
componentOrHandle,
87-
'findHostInstance_DEPRECATED',
88-
);
89-
} else {
90-
hostInstance = findHostInstance(componentOrHandle);
91-
}
92-
93-
return hostInstance;
94-
}
95-
96-
function findNodeHandle(componentOrHandle: any): ?number {
97-
if (__DEV__) {
98-
const owner = ReactCurrentOwner.current;
99-
if (owner !== null && owner.stateNode !== null) {
100-
if (!owner.stateNode._warnedAboutRefsInRender) {
101-
console.error(
102-
'%s is accessing findNodeHandle inside its render(). ' +
103-
'render() should be a pure function of props and state. It should ' +
104-
'never access something that requires stale data from the previous ' +
105-
'render, such as refs. Move this logic to componentDidMount and ' +
106-
'componentDidUpdate instead.',
107-
getComponentNameFromType(owner.type) || 'A component',
108-
);
109-
}
110-
111-
owner.stateNode._warnedAboutRefsInRender = true;
112-
}
113-
}
114-
if (componentOrHandle == null) {
115-
return null;
116-
}
117-
if (typeof componentOrHandle === 'number') {
118-
// Already a node handle
119-
return componentOrHandle;
120-
}
121-
if (componentOrHandle._nativeTag) {
122-
return componentOrHandle._nativeTag;
123-
}
124-
if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) {
125-
return componentOrHandle.canonical._nativeTag;
126-
}
127-
let hostInstance;
128-
if (__DEV__) {
129-
hostInstance = findHostInstanceWithWarning(
130-
componentOrHandle,
131-
'findNodeHandle',
132-
);
133-
} else {
134-
hostInstance = findHostInstance(componentOrHandle);
135-
}
136-
137-
if (hostInstance == null) {
138-
return hostInstance;
139-
}
140-
141-
return hostInstance._nativeTag;
142-
}
143-
144-
function dispatchCommand(handle: any, command: string, args: Array<any>) {
145-
if (handle._nativeTag == null) {
146-
if (__DEV__) {
147-
console.error(
148-
"dispatchCommand was called with a ref that isn't a " +
149-
'native component. Use React.forwardRef to get access to the underlying native component',
150-
);
151-
}
152-
return;
153-
}
154-
155-
if (handle._internalInstanceHandle != null) {
156-
const {stateNode} = handle._internalInstanceHandle;
157-
if (stateNode != null) {
158-
nativeFabricUIManager.dispatchCommand(stateNode.node, command, args);
159-
}
160-
} else {
161-
UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args);
162-
}
163-
}
164-
165-
function sendAccessibilityEvent(handle: any, eventType: string) {
166-
if (handle._nativeTag == null) {
167-
if (__DEV__) {
168-
console.error(
169-
"sendAccessibilityEvent was called with a ref that isn't a " +
170-
'native component. Use React.forwardRef to get access to the underlying native component',
171-
);
172-
}
173-
return;
174-
}
175-
176-
if (handle._internalInstanceHandle != null) {
177-
const {stateNode} = handle._internalInstanceHandle;
178-
if (stateNode != null) {
179-
nativeFabricUIManager.sendAccessibilityEvent(stateNode.node, eventType);
180-
}
181-
} else {
182-
legacySendAccessibilityEvent(handle._nativeTag, eventType);
183-
}
184-
}
36+
import {
37+
findHostInstance_DEPRECATED,
38+
findNodeHandle,
39+
dispatchCommand,
40+
sendAccessibilityEvent,
41+
} from './ReactNativePublicCompat';
18542

18643
// $FlowFixMe[missing-local-annot]
18744
function onRecoverableError(error) {

‎packages/react-native-renderer/src/ReactNativePublicCompat.js‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
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+
* @flow
8+
*/
9+
10+
import type {HostComponent} from './ReactNativeTypes';
11+
import type {ElementRef, ElementType} from 'react';
12+
13+
// Modules provided by RN:
14+
import {
15+
UIManager,
16+
legacySendAccessibilityEvent,
17+
} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
18+
19+
import {
20+
findHostInstance,
21+
findHostInstanceWithWarning,
22+
} from 'react-reconciler/src/ReactFiberReconciler';
23+
import ReactSharedInternals from 'shared/ReactSharedInternals';
24+
import getComponentNameFromType from 'shared/getComponentNameFromType';
25+
26+
const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
27+
28+
export function findHostInstance_DEPRECATED<TElementType: ElementType>(
29+
componentOrHandle: ?(ElementRef<TElementType> | number),
30+
): ?ElementRef<HostComponent<mixed>> {
31+
if (__DEV__) {
32+
const owner = ReactCurrentOwner.current;
33+
if (owner !== null && owner.stateNode !== null) {
34+
if (!owner.stateNode._warnedAboutRefsInRender) {
35+
console.error(
36+
'%s is accessing findNodeHandle inside its render(). ' +
37+
'render() should be a pure function of props and state. It should ' +
38+
'never access something that requires stale data from the previous ' +
39+
'render, such as refs. Move this logic to componentDidMount and ' +
40+
'componentDidUpdate instead.',
41+
getComponentNameFromType(owner.type) || 'A component',
42+
);
43+
}
44+
45+
owner.stateNode._warnedAboutRefsInRender = true;
46+
}
47+
}
48+
if (componentOrHandle == null) {
49+
return null;
50+
}
51+
// $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
52+
if (componentOrHandle._nativeTag) {
53+
// $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
54+
return componentOrHandle;
55+
}
56+
// $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
57+
if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) {
58+
// $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
59+
return componentOrHandle.canonical;
60+
}
61+
let hostInstance;
62+
if (__DEV__) {
63+
hostInstance = findHostInstanceWithWarning(
64+
componentOrHandle,
65+
'findHostInstance_DEPRECATED',
66+
);
67+
} else {
68+
hostInstance = findHostInstance(componentOrHandle);
69+
}
70+
71+
return hostInstance;
72+
}
73+
74+
export function findNodeHandle(componentOrHandle: any): ?number {
75+
if (__DEV__) {
76+
const owner = ReactCurrentOwner.current;
77+
if (owner !== null && owner.stateNode !== null) {
78+
if (!owner.stateNode._warnedAboutRefsInRender) {
79+
console.error(
80+
'%s is accessing findNodeHandle inside its render(). ' +
81+
'render() should be a pure function of props and state. It should ' +
82+
'never access something that requires stale data from the previous ' +
83+
'render, such as refs. Move this logic to componentDidMount and ' +
84+
'componentDidUpdate instead.',
85+
getComponentNameFromType(owner.type) || 'A component',
86+
);
87+
}
88+
89+
owner.stateNode._warnedAboutRefsInRender = true;
90+
}
91+
}
92+
if (componentOrHandle == null) {
93+
return null;
94+
}
95+
if (typeof componentOrHandle === 'number') {
96+
// Already a node handle
97+
return componentOrHandle;
98+
}
99+
if (componentOrHandle._nativeTag) {
100+
return componentOrHandle._nativeTag;
101+
}
102+
if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) {
103+
return componentOrHandle.canonical._nativeTag;
104+
}
105+
let hostInstance;
106+
if (__DEV__) {
107+
hostInstance = findHostInstanceWithWarning(
108+
componentOrHandle,
109+
'findNodeHandle',
110+
);
111+
} else {
112+
hostInstance = findHostInstance(componentOrHandle);
113+
}
114+
115+
if (hostInstance == null) {
116+
return hostInstance;
117+
}
118+
119+
return hostInstance._nativeTag;
120+
}
121+
122+
export function dispatchCommand(
123+
handle: any,
124+
command: string,
125+
args: Array<any>,
126+
) {
127+
if (handle._nativeTag == null) {
128+
if (__DEV__) {
129+
console.error(
130+
"dispatchCommand was called with a ref that isn't a " +
131+
'native component. Use React.forwardRef to get access to the underlying native component',
132+
);
133+
}
134+
return;
135+
}
136+
137+
if (handle._internalInstanceHandle != null) {
138+
const {stateNode} = handle._internalInstanceHandle;
139+
if (stateNode != null) {
140+
nativeFabricUIManager.dispatchCommand(stateNode.node, command, args);
141+
}
142+
} else {
143+
UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args);
144+
}
145+
}
146+
147+
export function sendAccessibilityEvent(handle: any, eventType: string) {
148+
if (handle._nativeTag == null) {
149+
if (__DEV__) {
150+
console.error(
151+
"sendAccessibilityEvent was called with a ref that isn't a " +
152+
'native component. Use React.forwardRef to get access to the underlying native component',
153+
);
154+
}
155+
return;
156+
}
157+
158+
if (handle._internalInstanceHandle != null) {
159+
const {stateNode} = handle._internalInstanceHandle;
160+
if (stateNode != null) {
161+
nativeFabricUIManager.sendAccessibilityEvent(stateNode.node, eventType);
162+
}
163+
} else {
164+
legacySendAccessibilityEvent(handle._nativeTag, eventType);
165+
}
166+
}

0 commit comments

Comments
 (0)