Skip to content

Commit db8afe4

Browse files
authored
Add HostComponent type to ReactNative (#16898)
* Add HostComponent type to ReactNative * Use type alias imports instead of wildcard * Fix forgotten Object in measureLayout type
1 parent fad5102 commit db8afe4

File tree

5 files changed

+33
-18
lines changed

5 files changed

+33
-18
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ export default function(
161161
measureLayout: function(
162162
relativeToNativeNode: number | Object,
163163
onSuccess: MeasureLayoutOnSuccessCallback,
164-
onFail: () => void /* currently unused */,
164+
onFail?: () => void /* currently unused */,
165165
) {
166166
let maybeInstance;
167167

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import type {
1111
MeasureInWindowOnSuccessCallback,
1212
MeasureLayoutOnSuccessCallback,
1313
MeasureOnSuccessCallback,
14-
NativeMethodsMixinType,
14+
NativeMethods,
1515
ReactNativeBaseComponentViewConfig,
1616
ReactNativeResponderEvent,
1717
ReactNativeResponderContext,
@@ -151,9 +151,9 @@ class ReactFabricHostComponent {
151151
}
152152

153153
measureLayout(
154-
relativeToNativeNode: number | Object,
154+
relativeToNativeNode: number | ReactFabricHostComponent,
155155
onSuccess: MeasureLayoutOnSuccessCallback,
156-
onFail: () => void /* currently unused */,
156+
onFail?: () => void /* currently unused */,
157157
) {
158158
if (
159159
typeof relativeToNativeNode === 'number' ||
@@ -186,7 +186,7 @@ class ReactFabricHostComponent {
186186
}
187187

188188
// eslint-disable-next-line no-unused-expressions
189-
(ReactFabricHostComponent.prototype: NativeMethodsMixinType);
189+
(ReactFabricHostComponent.prototype: NativeMethods);
190190

191191
export * from 'shared/HostConfigWithNoMutation';
192192
export * from 'shared/HostConfigWithNoHydration';

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import type {
1212
MeasureInWindowOnSuccessCallback,
1313
MeasureLayoutOnSuccessCallback,
1414
MeasureOnSuccessCallback,
15-
NativeMethodsMixinType,
15+
NativeMethods,
1616
ReactNativeBaseComponentViewConfig,
1717
} from './ReactNativeTypes';
1818

@@ -172,7 +172,7 @@ export default function(
172172
measureLayout(
173173
relativeToNativeNode: number | Object,
174174
onSuccess: MeasureLayoutOnSuccessCallback,
175-
onFail: () => void /* currently unused */,
175+
onFail?: () => void /* currently unused */,
176176
): void {
177177
let maybeInstance;
178178

@@ -295,7 +295,7 @@ export default function(
295295
}
296296

297297
// eslint-disable-next-line no-unused-expressions
298-
(ReactNativeComponent.prototype: NativeMethodsMixinType);
298+
(ReactNativeComponent.prototype: NativeMethods);
299299

300300
return ReactNativeComponent;
301301
}

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import type {
1111
MeasureInWindowOnSuccessCallback,
1212
MeasureLayoutOnSuccessCallback,
1313
MeasureOnSuccessCallback,
14-
NativeMethodsMixinType,
14+
NativeMethods,
1515
ReactNativeBaseComponentViewConfig,
1616
} from './ReactNativeTypes';
1717
import type {Instance} from './ReactNativeHostConfig';
@@ -72,21 +72,25 @@ class ReactNativeFiberHostComponent {
7272
}
7373

7474
measureLayout(
75-
relativeToNativeNode: number | Object,
75+
relativeToNativeNode: number | ReactNativeFiberHostComponent,
7676
onSuccess: MeasureLayoutOnSuccessCallback,
77-
onFail: () => void /* currently unused */,
77+
onFail?: () => void /* currently unused */,
7878
) {
79-
let relativeNode;
79+
let relativeNode: ?number;
8080

8181
if (typeof relativeToNativeNode === 'number') {
8282
// Already a node handle
8383
relativeNode = relativeToNativeNode;
8484
} else if (relativeToNativeNode._nativeTag) {
8585
relativeNode = relativeToNativeNode._nativeTag;
8686
} else if (
87+
/* $FlowFixMe canonical doesn't exist on the node.
88+
I think this branch is dead and will remove it in a followup */
8789
relativeToNativeNode.canonical &&
8890
relativeToNativeNode.canonical._nativeTag
8991
) {
92+
/* $FlowFixMe canonical doesn't exist on the node.
93+
I think this branch is dead and will remove it in a followup */
9094
relativeNode = relativeToNativeNode.canonical._nativeTag;
9195
}
9296

@@ -137,6 +141,6 @@ class ReactNativeFiberHostComponent {
137141
}
138142

139143
// eslint-disable-next-line no-unused-expressions
140-
(ReactNativeFiberHostComponent.prototype: NativeMethodsMixinType);
144+
(ReactNativeFiberHostComponent.prototype: NativeMethods);
141145

142146
export default ReactNativeFiberHostComponent;

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

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
* @flow
99
*/
1010

11-
import React from 'react';
11+
import React, {type ElementRef, type AbstractComponent} from 'react';
1212

1313
export type MeasureOnSuccessCallback = (
1414
x: number,
@@ -89,30 +89,41 @@ class ReactNativeComponent<Props> extends React.Component<Props> {
8989
measure(callback: MeasureOnSuccessCallback): void {}
9090
measureInWindow(callback: MeasureInWindowOnSuccessCallback): void {}
9191
measureLayout(
92-
relativeToNativeNode: number | Object,
92+
relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
9393
onSuccess: MeasureLayoutOnSuccessCallback,
9494
onFail?: () => void,
9595
): void {}
9696
setNativeProps(nativeProps: Object): void {}
9797
}
9898

99+
// This type is only used for FlowTests. It shouldn't be imported directly
100+
export type _InternalReactNativeComponentClass<Props> = Class<
101+
ReactNativeComponent<Props>,
102+
>;
103+
99104
/**
100105
* This type keeps ReactNativeFiberHostComponent and NativeMethodsMixin in sync.
101106
* It can also provide types for ReactNative applications that use NMM or refs.
102107
*/
103-
export type NativeMethodsMixinType = {
108+
export type NativeMethods = {
104109
blur(): void,
105110
focus(): void,
106111
measure(callback: MeasureOnSuccessCallback): void,
107112
measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
108113
measureLayout(
109-
relativeToNativeNode: number | Object,
114+
relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
110115
onSuccess: MeasureLayoutOnSuccessCallback,
111-
onFail: () => void,
116+
onFail?: () => void,
112117
): void,
113118
setNativeProps(nativeProps: Object): void,
114119
};
115120

121+
export type NativeMethodsMixinType = NativeMethods;
122+
export type HostComponent<T> = AbstractComponent<
123+
T,
124+
$ReadOnly<$Exact<NativeMethods>>,
125+
>;
126+
116127
type SecretInternalsType = {
117128
NativeMethodsMixin: NativeMethodsMixinType,
118129
computeComponentStackForErrorReporting(tag: number): string,

0 commit comments

Comments
 (0)