Add HostComponent type to ReactNative (#16898)
* Add HostComponent type to ReactNative * Use type alias imports instead of wildcard * Fix forgotten Object in measureLayout type
Eli White committed
Sep 26, 2019 at 14:42 UTC
db8afe4f6318dba422177a2054204ef089570ad8
5 files changed
+33
-18
packages/react-native-renderer/src/NativeMethodsMixin.js
+1
-1
@@ -161,7 +161,7 @@ export default function(
161
measureLayout: function(
162
relativeToNativeNode: number | Object,
163
onSuccess: MeasureLayoutOnSuccessCallback,
164
- onFail: () => void /* currently unused */,
164
+ onFail?: () => void /* currently unused */,
165
) {
166
let maybeInstance;
167
packages/react-native-renderer/src/ReactFabricHostConfig.js
+4
-4
@@ -11,7 +11,7 @@ import type {
11
MeasureInWindowOnSuccessCallback,
12
MeasureLayoutOnSuccessCallback,
13
MeasureOnSuccessCallback,
14
- NativeMethodsMixinType,
14
+ NativeMethods,
15
ReactNativeBaseComponentViewConfig,
16
ReactNativeResponderEvent,
17
ReactNativeResponderContext,
@@ -151,9 +151,9 @@ class ReactFabricHostComponent {
151
}
152
153
measureLayout(
154
- relativeToNativeNode: number | Object,
154
+ relativeToNativeNode: number | ReactFabricHostComponent,
155
onSuccess: MeasureLayoutOnSuccessCallback,
156
- onFail: () => void /* currently unused */,
156
+ onFail?: () => void /* currently unused */,
157
) {
158
if (
159
typeof relativeToNativeNode === 'number' ||
@@ -186,7 +186,7 @@ class ReactFabricHostComponent {
186
}
187
188
// eslint-disable-next-line no-unused-expressions
189
-(ReactFabricHostComponent.prototype: NativeMethodsMixinType);
189
+(ReactFabricHostComponent.prototype: NativeMethods);
190
191
export * from 'shared/HostConfigWithNoMutation';
192
export * from 'shared/HostConfigWithNoHydration';
packages/react-native-renderer/src/ReactNativeComponent.js
+3
-3
@@ -12,7 +12,7 @@ import type {
12
MeasureInWindowOnSuccessCallback,
13
MeasureLayoutOnSuccessCallback,
14
MeasureOnSuccessCallback,
15
- NativeMethodsMixinType,
15
+ NativeMethods,
16
ReactNativeBaseComponentViewConfig,
17
} from './ReactNativeTypes';
18
@@ -172,7 +172,7 @@ export default function(
172
measureLayout(
173
relativeToNativeNode: number | Object,
174
onSuccess: MeasureLayoutOnSuccessCallback,
175
- onFail: () => void /* currently unused */,
175
+ onFail?: () => void /* currently unused */,
176
): void {
177
let maybeInstance;
178
@@ -295,7 +295,7 @@ export default function(
295
}
296
297
// eslint-disable-next-line no-unused-expressions
298
- (ReactNativeComponent.prototype: NativeMethodsMixinType);
298
+ (ReactNativeComponent.prototype: NativeMethods);
299
300
return ReactNativeComponent;
301
}
packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
+9
-5
@@ -11,7 +11,7 @@ import type {
11
MeasureInWindowOnSuccessCallback,
12
MeasureLayoutOnSuccessCallback,
13
MeasureOnSuccessCallback,
14
- NativeMethodsMixinType,
14
+ NativeMethods,
15
ReactNativeBaseComponentViewConfig,
16
} from './ReactNativeTypes';
17
import type {Instance} from './ReactNativeHostConfig';
@@ -72,11 +72,11 @@ class ReactNativeFiberHostComponent {
72
}
73
74
measureLayout(
75
- relativeToNativeNode: number | Object,
75
+ relativeToNativeNode: number | ReactNativeFiberHostComponent,
76
onSuccess: MeasureLayoutOnSuccessCallback,
77
- onFail: () => void /* currently unused */,
77
+ onFail?: () => void /* currently unused */,
78
) {
79
- let relativeNode;
79
+ let relativeNode: ?number;
80
81
if (typeof relativeToNativeNode === 'number') {
82
// Already a node handle
@@ -84,9 +84,13 @@ class ReactNativeFiberHostComponent {
84
} else if (relativeToNativeNode._nativeTag) {
85
relativeNode = relativeToNativeNode._nativeTag;
86
} 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 */
89
relativeToNativeNode.canonical &&
90
relativeToNativeNode.canonical._nativeTag
91
) {
92
+ /* $FlowFixMe canonical doesn't exist on the node.
93
+ I think this branch is dead and will remove it in a followup */
94
relativeNode = relativeToNativeNode.canonical._nativeTag;
95
}
96
@@ -137,6 +141,6 @@ class ReactNativeFiberHostComponent {
141
}
142
143
// eslint-disable-next-line no-unused-expressions
140
-(ReactNativeFiberHostComponent.prototype: NativeMethodsMixinType);
144
+(ReactNativeFiberHostComponent.prototype: NativeMethods);
145
146
export default ReactNativeFiberHostComponent;
packages/react-native-renderer/src/ReactNativeTypes.js
+16
-5
@@ -8,7 +8,7 @@
8
* @flow
9
*/
10
11
-import React from 'react';
11
+import React, {type ElementRef, type AbstractComponent} from 'react';
12
13
export type MeasureOnSuccessCallback = (
14
x: number,
@@ -89,30 +89,41 @@ class ReactNativeComponent<Props> extends React.Component<Props> {
89
measure(callback: MeasureOnSuccessCallback): void {}
90
measureInWindow(callback: MeasureInWindowOnSuccessCallback): void {}
91
measureLayout(
92
- relativeToNativeNode: number | Object,
92
+ relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
93
onSuccess: MeasureLayoutOnSuccessCallback,
94
onFail?: () => void,
95
): void {}
96
setNativeProps(nativeProps: Object): void {}
97
}
98
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
+
104
/**
105
* This type keeps ReactNativeFiberHostComponent and NativeMethodsMixin in sync.
106
* It can also provide types for ReactNative applications that use NMM or refs.
107
*/
103
-export type NativeMethodsMixinType = {
108
+export type NativeMethods = {
109
blur(): void,
110
focus(): void,
111
measure(callback: MeasureOnSuccessCallback): void,
112
measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
113
measureLayout(
109
- relativeToNativeNode: number | Object,
114
+ relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
115
onSuccess: MeasureLayoutOnSuccessCallback,
111
- onFail: () => void,
116
+ onFail?: () => void,
117
): void,
118
setNativeProps(nativeProps: Object): void,
119
};
120
121
+export type NativeMethodsMixinType = NativeMethods;
122
+export type HostComponent<T> = AbstractComponent<
123
+ T,
124
+ $ReadOnly<$Exact<NativeMethods>>,
125
+>;
126
+
127
type SecretInternalsType = {
128
NativeMethodsMixin: NativeMethodsMixinType,
129
computeComponentStackForErrorReporting(tag: number): string,