Update React Native types (#20883)
Rubén Norte committed
Feb 25, 2021 at 21:10 UTC
8336f19aa80c6646d6969fa61e34420776d884be
6 files changed
+114
-85
packages/react-native-renderer/src/ReactFabric.js
+12
-7
@@ -9,7 +9,7 @@
9
10
import type {HostComponent} from './ReactNativeTypes';
11
import type {ReactNodeList} from 'shared/ReactTypes';
12
-import type {ElementRef} from 'react';
12
+import type {ElementRef, Element, ElementType} from 'react';
13
14
import './ReactFabricInjection';
15
@@ -47,8 +47,8 @@ import getComponentName from 'shared/getComponentName';
47
48
const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
49
50
-function findHostInstance_DEPRECATED(
51
- componentOrHandle: any,
50
+function findHostInstance_DEPRECATED<TElementType: ElementType>(
51
+ componentOrHandle: ?(ElementRef<TElementType> | number),
52
): ?ElementRef<HostComponent<mixed>> {
53
if (__DEV__) {
54
const owner = ReactCurrentOwner.current;
@@ -70,10 +70,14 @@ function findHostInstance_DEPRECATED(
70
if (componentOrHandle == null) {
71
return null;
72
}
73
+ // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
74
if (componentOrHandle._nativeTag) {
75
+ // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
76
return componentOrHandle;
77
}
78
+ // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
79
if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) {
80
+ // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
81
return componentOrHandle.canonical;
82
}
83
let hostInstance;
@@ -194,10 +198,10 @@ function sendAccessibilityEvent(handle: any, eventType: string) {
198
}
199
200
function render(
197
- element: React$Element<any>,
198
- containerTag: any,
199
- callback: ?Function,
200
-) {
201
+ element: Element<ElementType>,
202
+ containerTag: number,
203
+ callback: ?() => void,
204
+): ?ElementRef<ElementType> {
205
let root = roots.get(containerTag);
206
207
if (!root) {
@@ -208,6 +212,7 @@ function render(
212
}
213
updateContainer(element, root, null, callback);
214
215
+ // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
216
return getPublicRootInstance(root);
217
}
218
packages/react-native-renderer/src/ReactFabricHostConfig.js
+3
-3
@@ -14,7 +14,7 @@ import type {
14
MeasureLayoutOnSuccessCallback,
15
MeasureOnSuccessCallback,
16
NativeMethods,
17
- ReactNativeBaseComponentViewConfig,
17
+ ViewConfig,
18
TouchedViewDataAtPoint,
19
} from './ReactNativeTypes';
20
@@ -111,13 +111,13 @@ if (registerEventHandler) {
111
*/
112
class ReactFabricHostComponent {
113
_nativeTag: number;
114
- viewConfig: ReactNativeBaseComponentViewConfig<>;
114
+ viewConfig: ViewConfig;
115
currentProps: Props;
116
_internalInstanceHandle: Object;
117
118
constructor(
119
tag: number,
120
- viewConfig: ReactNativeBaseComponentViewConfig<>,
120
+ viewConfig: ViewConfig,
121
props: Props,
122
internalInstanceHandle: Object,
123
) {
packages/react-native-renderer/src/ReactNativeAttributePayload.js
+13
-13
@@ -49,7 +49,7 @@ function defaultDiffer(prevProp: mixed, nextProp: mixed): boolean {
49
function restoreDeletedValuesInNestedArray(
50
updatePayload: Object,
51
node: NestedNode,
52
- validAttributes: AttributeConfiguration<>,
52
+ validAttributes: AttributeConfiguration,
53
) {
54
if (Array.isArray(node)) {
55
let i = node.length;
@@ -107,7 +107,7 @@ function diffNestedArrayProperty(
107
updatePayload: null | Object,
108
prevArray: Array<NestedNode>,
109
nextArray: Array<NestedNode>,
110
- validAttributes: AttributeConfiguration<>,
110
+ validAttributes: AttributeConfiguration,
111
): null | Object {
112
const minLength =
113
prevArray.length < nextArray.length ? prevArray.length : nextArray.length;
@@ -145,7 +145,7 @@ function diffNestedProperty(
145
updatePayload: null | Object,
146
prevProp: NestedNode,
147
nextProp: NestedNode,
148
- validAttributes: AttributeConfiguration<>,
148
+ validAttributes: AttributeConfiguration,
149
): null | Object {
150
if (!updatePayload && prevProp === nextProp) {
151
// If no properties have been added, then we can bail out quickly on object
@@ -206,7 +206,7 @@ function diffNestedProperty(
206
function addNestedProperty(
207
updatePayload: null | Object,
208
nextProp: NestedNode,
209
- validAttributes: AttributeConfiguration<>,
209
+ validAttributes: AttributeConfiguration,
210
) {
211
if (!nextProp) {
212
return updatePayload;
@@ -236,7 +236,7 @@ function addNestedProperty(
236
function clearNestedProperty(
237
updatePayload: null | Object,
238
prevProp: NestedNode,
239
- validAttributes: AttributeConfiguration<>,
239
+ validAttributes: AttributeConfiguration,
240
): null | Object {
241
if (!prevProp) {
242
return updatePayload;
@@ -268,7 +268,7 @@ function diffProperties(
268
updatePayload: null | Object,
269
prevProps: Object,
270
nextProps: Object,
271
- validAttributes: AttributeConfiguration<>,
271
+ validAttributes: AttributeConfiguration,
272
): null | Object {
273
let attributeConfig;
274
let nextProp;
@@ -369,13 +369,13 @@ function diffProperties(
369
updatePayload,
370
prevProp,
371
nextProp,
372
- ((attributeConfig: any): AttributeConfiguration<>),
372
+ ((attributeConfig: any): AttributeConfiguration),
373
);
374
if (removedKeyCount > 0 && updatePayload) {
375
restoreDeletedValuesInNestedArray(
376
updatePayload,
377
nextProp,
378
- ((attributeConfig: any): AttributeConfiguration<>),
378
+ ((attributeConfig: any): AttributeConfiguration),
379
);
380
removedKeys = null;
381
}
@@ -426,7 +426,7 @@ function diffProperties(
426
updatePayload = clearNestedProperty(
427
updatePayload,
428
prevProp,
429
- ((attributeConfig: any): AttributeConfiguration<>),
429
+ ((attributeConfig: any): AttributeConfiguration),
430
);
431
}
432
}
@@ -439,7 +439,7 @@ function diffProperties(
439
function addProperties(
440
updatePayload: null | Object,
441
props: Object,
442
- validAttributes: AttributeConfiguration<>,
442
+ validAttributes: AttributeConfiguration,
443
): null | Object {
444
// TODO: Fast path
445
return diffProperties(updatePayload, emptyObject, props, validAttributes);
@@ -452,7 +452,7 @@ function addProperties(
452
function clearProperties(
453
updatePayload: null | Object,
454
prevProps: Object,
455
- validAttributes: AttributeConfiguration<>,
455
+ validAttributes: AttributeConfiguration,
456
): null | Object {
457
// TODO: Fast path
458
return diffProperties(updatePayload, prevProps, emptyObject, validAttributes);
@@ -460,7 +460,7 @@ function clearProperties(
460
461
export function create(
462
props: Object,
463
- validAttributes: AttributeConfiguration<>,
463
+ validAttributes: AttributeConfiguration,
464
): null | Object {
465
return addProperties(
466
null, // updatePayload
@@ -472,7 +472,7 @@ export function create(
472
export function diff(
473
prevProps: Object,
474
nextProps: Object,
475
- validAttributes: AttributeConfiguration<>,
475
+ validAttributes: AttributeConfiguration,
476
): null | Object {
477
return diffProperties(
478
null, // updatePayload
packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
+3
-3
@@ -14,7 +14,7 @@ import type {
14
MeasureLayoutOnSuccessCallback,
15
MeasureOnSuccessCallback,
16
NativeMethods,
17
- ReactNativeBaseComponentViewConfig,
17
+ ViewConfig,
18
} from './ReactNativeTypes';
19
import type {Instance} from './ReactNativeHostConfig';
20
@@ -34,11 +34,11 @@ class ReactNativeFiberHostComponent {
34
_children: Array<Instance | number>;
35
_nativeTag: number;
36
_internalFiberInstanceHandleDEV: Object;
37
- viewConfig: ReactNativeBaseComponentViewConfig<>;
37
+ viewConfig: ViewConfig;
38
39
constructor(
40
tag: number,
41
- viewConfig: ReactNativeBaseComponentViewConfig<>,
41
+ viewConfig: ViewConfig,
42
internalInstanceHandleDEV: Object,
43
) {
44
this._nativeTag = tag;
packages/react-native-renderer/src/ReactNativeRenderer.js
+6
-4
@@ -9,6 +9,7 @@
9
10
import type {HostComponent} from './ReactNativeTypes';
11
import type {ReactNodeList} from 'shared/ReactTypes';
12
+import type {ElementRef, Element, ElementType} from 'react';
13
14
import './ReactNativeInjection';
15
@@ -193,10 +194,10 @@ function sendAccessibilityEvent(handle: any, eventType: string) {
194
}
195
196
function render(
196
- element: React$Element<any>,
197
- containerTag: any,
198
- callback: ?Function,
199
-) {
197
+ element: Element<ElementType>,
198
+ containerTag: number,
199
+ callback: ?() => void,
200
+): ?ElementRef<ElementType> {
201
let root = roots.get(containerTag);
202
203
if (!root) {
@@ -207,6 +208,7 @@ function render(
208
}
209
updateContainer(element, root, null, callback);
210
211
+ // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
212
return getPublicRootInstance(root);
213
}
214
packages/react-native-renderer/src/ReactNativeTypes.js
+77
-55
@@ -5,10 +5,10 @@
5
* LICENSE file in the root directory of this source tree.
6
*
7
* @format
8
- * @flow
8
+ * @flow strict
9
*/
10
11
-import type {ElementRef, AbstractComponent} from 'react';
11
+import type {ElementRef, ElementType, Element, AbstractComponent} from 'react';
12
13
export type MeasureOnSuccessCallback = (
14
x: number,
@@ -33,49 +33,66 @@ export type MeasureLayoutOnSuccessCallback = (
33
height: number,
34
) => void;
35
36
-type AttributeType =
36
+type AttributeType<T, V> =
37
| true
38
| $ReadOnly<{|
39
- diff?: <T>(arg1: T, arg2: T) => boolean,
40
- process?: (arg1: any) => any,
39
+ diff?: (arg1: T, arg2: T) => boolean,
40
+ process?: (arg1: V) => T,
41
|}>;
42
43
-export type AttributeConfiguration<
44
- TProps = string,
45
- TStyleProps = string,
46
-> = $ReadOnly<{
47
- [propName: TProps]: AttributeType,
48
- style: $ReadOnly<{[propName: TStyleProps]: AttributeType, ...}>,
43
+// We either force that `diff` and `process` always use mixed,
44
+// or we allow them to define specific types and use this hack
45
+type AnyAttributeType = AttributeType<$FlowFixMe, $FlowFixMe>;
46
+
47
+export type AttributeConfiguration = $ReadOnly<{
48
+ [propName: string]: AnyAttributeType,
49
+ style: $ReadOnly<{
50
+ [propName: string]: AnyAttributeType,
51
+ ...,
52
+ }>,
53
+ ...
54
+}>;
55
+
56
+type PartialAttributeConfiguration = $ReadOnly<{
57
+ [propName: string]: AnyAttributeType,
58
+ style?: $ReadOnly<{
59
+ [propName: string]: AnyAttributeType,
60
+ ...,
61
+ }>,
62
...
63
}>;
64
52
-export type ReactNativeBaseComponentViewConfig<
53
- TProps = string,
54
- TStyleProps = string,
55
-> = $ReadOnly<{|
56
- baseModuleName?: string,
65
+export type ViewConfig = $ReadOnly<{
66
+ Commands?: $ReadOnly<{[commandName: string]: number, ...}>,
67
+ Constants?: $ReadOnly<{[name: string]: mixed, ...}>,
68
+ Manager?: string,
69
+ NativeProps?: $ReadOnly<{[propName: string]: string, ...}>,
70
+ baseModuleName?: ?string,
71
bubblingEventTypes?: $ReadOnly<{
58
- [eventName: string]: $ReadOnly<{|
59
- phasedRegistrationNames: $ReadOnly<{|
72
+ [eventName: string]: $ReadOnly<{
73
+ phasedRegistrationNames: $ReadOnly<{
74
captured: string,
75
bubbled: string,
62
- |}>,
63
- |}>,
76
+ }>,
77
+ }>,
78
...,
79
}>,
66
- Commands?: $ReadOnly<{[commandName: string]: number, ...}>,
80
directEventTypes?: $ReadOnly<{
68
- [eventName: string]: $ReadOnly<{|
81
+ [eventName: string]: $ReadOnly<{
82
registrationName: string,
70
- |}>,
83
+ }>,
84
...,
85
}>,
73
- NativeProps?: $ReadOnly<{[propName: string]: string, ...}>,
86
uiViewClassName: string,
75
- validAttributes: AttributeConfiguration<TProps, TStyleProps>,
76
-|}>;
87
+ validAttributes: AttributeConfiguration,
88
+}>;
89
78
-export type ViewConfigGetter = () => ReactNativeBaseComponentViewConfig<>;
90
+export type PartialViewConfig = $ReadOnly<{
91
+ bubblingEventTypes?: $PropertyType<ViewConfig, 'bubblingEventTypes'>,
92
+ directEventTypes?: $PropertyType<ViewConfig, 'directEventTypes'>,
93
+ uiViewClassName: string,
94
+ validAttributes?: PartialAttributeConfiguration,
95
+}>;
96
97
export type NativeMethods = {
98
blur(): void,
@@ -87,7 +104,7 @@ export type NativeMethods = {
104
onSuccess: MeasureLayoutOnSuccessCallback,
105
onFail?: () => void,
106
): void,
90
- setNativeProps(nativeProps: Object): void,
107
+ setNativeProps(nativeProps: {...}): void,
108
...
109
};
110
@@ -111,9 +128,11 @@ type InspectorDataSource = $ReadOnly<{|
128
|}>;
129
130
type InspectorDataGetter = (
114
- (componentOrHandle: any) => ?number,
131
+ <TElementType: ElementType>(
132
+ componentOrHandle: ElementRef<TElementType> | number,
133
+ ) => ?number,
134
) => $ReadOnly<{|
116
- measure: Function,
135
+ measure: (callback: MeasureOnSuccessCallback) => void,
136
props: InspectorDataProps,
137
source: InspectorDataSource,
138
|}>;
@@ -145,62 +164,65 @@ export type TouchedViewDataAtPoint = $ReadOnly<{|
164
* Provide minimal Flow typing for the high-level RN API and call it a day.
165
*/
166
export type ReactNativeType = {
148
- findHostInstance_DEPRECATED(
149
- componentOrHandle: any,
167
+ findHostInstance_DEPRECATED<TElementType: ElementType>(
168
+ componentOrHandle: ?(ElementRef<TElementType> | number),
169
): ?ElementRef<HostComponent<mixed>>,
151
- findNodeHandle(componentOrHandle: any): ?number,
170
+ findNodeHandle<TElementType: ElementType>(
171
+ componentOrHandle: ?(ElementRef<TElementType> | number),
172
+ ): ?number,
173
dispatchCommand(
174
handle: ElementRef<HostComponent<mixed>>,
175
command: string,
155
- args: Array<any>,
176
+ args: Array<mixed>,
177
): void,
178
sendAccessibilityEvent(
179
handle: ElementRef<HostComponent<mixed>>,
180
eventType: string,
181
): void,
182
render(
162
- element: React$Element<any>,
163
- containerTag: any,
164
- callback: ?Function,
165
- ): any,
166
- unmountComponentAtNode(containerTag: number): any,
167
- unmountComponentAtNodeAndRemoveContainer(containerTag: number): any,
168
- // TODO (bvaughn) Add types
169
- unstable_batchedUpdates: any,
183
+ element: Element<ElementType>,
184
+ containerTag: number,
185
+ callback: ?() => void,
186
+ ): ?ElementRef<ElementType>,
187
+ unmountComponentAtNode(containerTag: number): void,
188
+ unmountComponentAtNodeAndRemoveContainer(containerTag: number): void,
189
+ unstable_batchedUpdates: <T>(fn: (T) => void, bookkeeping: T) => void,
190
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: SecretInternalsType,
191
...
192
};
193
194
export type ReactFabricType = {
175
- findHostInstance_DEPRECATED(
176
- componentOrHandle: any,
195
+ findHostInstance_DEPRECATED<TElementType: ElementType>(
196
+ componentOrHandle: ?(ElementRef<TElementType> | number),
197
): ?ElementRef<HostComponent<mixed>>,
178
- findNodeHandle(componentOrHandle: any): ?number,
198
+ findNodeHandle<TElementType: ElementType>(
199
+ componentOrHandle: ?(ElementRef<TElementType> | number),
200
+ ): ?number,
201
dispatchCommand(
202
handle: ElementRef<HostComponent<mixed>>,
203
command: string,
182
- args: Array<any>,
204
+ args: Array<mixed>,
205
): void,
206
sendAccessibilityEvent(
207
handle: ElementRef<HostComponent<mixed>>,
208
eventType: string,
209
): void,
210
render(
189
- element: React$Element<any>,
190
- containerTag: any,
191
- callback: ?Function,
192
- ): any,
193
- unmountComponentAtNode(containerTag: number): any,
211
+ element: Element<ElementType>,
212
+ containerTag: number,
213
+ callback: ?() => void,
214
+ ): ?ElementRef<ElementType>,
215
+ unmountComponentAtNode(containerTag: number): void,
216
...
217
};
218
219
export type ReactNativeEventTarget = {
198
- node: Object,
220
+ node: {...},
221
canonical: {
222
_nativeTag: number,
201
- viewConfig: ReactNativeBaseComponentViewConfig<>,
202
- currentProps: Object,
203
- _internalInstanceHandle: Object,
223
+ viewConfig: ViewConfig,
224
+ currentProps: {...},
225
+ _internalInstanceHandle: {...},
226
...
227
},
228
...