Update React Native types (#20883)

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

@@ -9,7 +9,7 @@
 
 import type {HostComponent} from './ReactNativeTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
-import type {ElementRef} from 'react';
+import type {ElementRef, Element, ElementType} from 'react';
 
 import './ReactFabricInjection';
 
@@ -47,8 +47,8 @@ import getComponentName from 'shared/getComponentName';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
-function findHostInstance_DEPRECATED(
-  componentOrHandle: any,
+function findHostInstance_DEPRECATED<TElementType: ElementType>(
+  componentOrHandle: ?(ElementRef<TElementType> | number),
 ): ?ElementRef<HostComponent<mixed>> {
   if (__DEV__) {
     const owner = ReactCurrentOwner.current;
@@ -70,10 +70,14 @@ function findHostInstance_DEPRECATED(
   if (componentOrHandle == null) {
     return null;
   }
+  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
   if (componentOrHandle._nativeTag) {
+    // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
     return componentOrHandle;
   }
+  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
   if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) {
+    // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
     return componentOrHandle.canonical;
   }
   let hostInstance;
@@ -194,10 +198,10 @@ function sendAccessibilityEvent(handle: any, eventType: string) {
 }
 
 function render(
-  element: React$Element<any>,
-  containerTag: any,
-  callback: ?Function,
-) {
+  element: Element<ElementType>,
+  containerTag: number,
+  callback: ?() => void,
+): ?ElementRef<ElementType> {
   let root = roots.get(containerTag);
 
   if (!root) {
@@ -208,6 +212,7 @@ function render(
   }
   updateContainer(element, root, null, callback);
 
+  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
   return getPublicRootInstance(root);
 }
 

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

@@ -14,7 +14,7 @@ import type {
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
   NativeMethods,
-  ReactNativeBaseComponentViewConfig,
+  ViewConfig,
   TouchedViewDataAtPoint,
 } from './ReactNativeTypes';
 
@@ -111,13 +111,13 @@ if (registerEventHandler) {
  */
 class ReactFabricHostComponent {
   _nativeTag: number;
-  viewConfig: ReactNativeBaseComponentViewConfig<>;
+  viewConfig: ViewConfig;
   currentProps: Props;
   _internalInstanceHandle: Object;
 
   constructor(
     tag: number,
-    viewConfig: ReactNativeBaseComponentViewConfig<>,
+    viewConfig: ViewConfig,
     props: Props,
     internalInstanceHandle: Object,
   ) {

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

@@ -49,7 +49,7 @@ function defaultDiffer(prevProp: mixed, nextProp: mixed): boolean {
 function restoreDeletedValuesInNestedArray(
   updatePayload: Object,
   node: NestedNode,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ) {
   if (Array.isArray(node)) {
     let i = node.length;
@@ -107,7 +107,7 @@ function diffNestedArrayProperty(
   updatePayload: null | Object,
   prevArray: Array<NestedNode>,
   nextArray: Array<NestedNode>,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   const minLength =
     prevArray.length < nextArray.length ? prevArray.length : nextArray.length;
@@ -145,7 +145,7 @@ function diffNestedProperty(
   updatePayload: null | Object,
   prevProp: NestedNode,
   nextProp: NestedNode,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   if (!updatePayload && prevProp === nextProp) {
     // If no properties have been added, then we can bail out quickly on object
@@ -206,7 +206,7 @@ function diffNestedProperty(
 function addNestedProperty(
   updatePayload: null | Object,
   nextProp: NestedNode,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ) {
   if (!nextProp) {
     return updatePayload;
@@ -236,7 +236,7 @@ function addNestedProperty(
 function clearNestedProperty(
   updatePayload: null | Object,
   prevProp: NestedNode,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   if (!prevProp) {
     return updatePayload;
@@ -268,7 +268,7 @@ function diffProperties(
   updatePayload: null | Object,
   prevProps: Object,
   nextProps: Object,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   let attributeConfig;
   let nextProp;
@@ -369,13 +369,13 @@ function diffProperties(
         updatePayload,
         prevProp,
         nextProp,
-        ((attributeConfig: any): AttributeConfiguration<>),
+        ((attributeConfig: any): AttributeConfiguration),
       );
       if (removedKeyCount > 0 && updatePayload) {
         restoreDeletedValuesInNestedArray(
           updatePayload,
           nextProp,
-          ((attributeConfig: any): AttributeConfiguration<>),
+          ((attributeConfig: any): AttributeConfiguration),
         );
         removedKeys = null;
       }
@@ -426,7 +426,7 @@ function diffProperties(
       updatePayload = clearNestedProperty(
         updatePayload,
         prevProp,
-        ((attributeConfig: any): AttributeConfiguration<>),
+        ((attributeConfig: any): AttributeConfiguration),
       );
     }
   }
@@ -439,7 +439,7 @@ function diffProperties(
 function addProperties(
   updatePayload: null | Object,
   props: Object,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   // TODO: Fast path
   return diffProperties(updatePayload, emptyObject, props, validAttributes);
@@ -452,7 +452,7 @@ function addProperties(
 function clearProperties(
   updatePayload: null | Object,
   prevProps: Object,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   // TODO: Fast path
   return diffProperties(updatePayload, prevProps, emptyObject, validAttributes);
@@ -460,7 +460,7 @@ function clearProperties(
 
 export function create(
   props: Object,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   return addProperties(
     null, // updatePayload
@@ -472,7 +472,7 @@ export function create(
 export function diff(
   prevProps: Object,
   nextProps: Object,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   return diffProperties(
     null, // updatePayload

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

@@ -14,7 +14,7 @@ import type {
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
   NativeMethods,
-  ReactNativeBaseComponentViewConfig,
+  ViewConfig,
 } from './ReactNativeTypes';
 import type {Instance} from './ReactNativeHostConfig';
 
@@ -34,11 +34,11 @@ class ReactNativeFiberHostComponent {
   _children: Array<Instance | number>;
   _nativeTag: number;
   _internalFiberInstanceHandleDEV: Object;
-  viewConfig: ReactNativeBaseComponentViewConfig<>;
+  viewConfig: ViewConfig;
 
   constructor(
     tag: number,
-    viewConfig: ReactNativeBaseComponentViewConfig<>,
+    viewConfig: ViewConfig,
     internalInstanceHandleDEV: Object,
   ) {
     this._nativeTag = tag;

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

@@ -9,6 +9,7 @@
 
 import type {HostComponent} from './ReactNativeTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
+import type {ElementRef, Element, ElementType} from 'react';
 
 import './ReactNativeInjection';
 
@@ -193,10 +194,10 @@ function sendAccessibilityEvent(handle: any, eventType: string) {
 }
 
 function render(
-  element: React$Element<any>,
-  containerTag: any,
-  callback: ?Function,
-) {
+  element: Element<ElementType>,
+  containerTag: number,
+  callback: ?() => void,
+): ?ElementRef<ElementType> {
   let root = roots.get(containerTag);
 
   if (!root) {
@@ -207,6 +208,7 @@ function render(
   }
   updateContainer(element, root, null, callback);
 
+  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
   return getPublicRootInstance(root);
 }
 

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

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow
+ * @flow strict
  */
 
-import type {ElementRef, AbstractComponent} from 'react';
+import type {ElementRef, ElementType, Element, AbstractComponent} from 'react';
 
 export type MeasureOnSuccessCallback = (
   x: number,
@@ -33,49 +33,66 @@ export type MeasureLayoutOnSuccessCallback = (
   height: number,
 ) => void;
 
-type AttributeType =
+type AttributeType<T, V> =
   | true
   | $ReadOnly<{|
-      diff?: <T>(arg1: T, arg2: T) => boolean,
-      process?: (arg1: any) => any,
+      diff?: (arg1: T, arg2: T) => boolean,
+      process?: (arg1: V) => T,
     |}>;
 
-export type AttributeConfiguration<
-  TProps = string,
-  TStyleProps = string,
-> = $ReadOnly<{
-  [propName: TProps]: AttributeType,
-  style: $ReadOnly<{[propName: TStyleProps]: AttributeType, ...}>,
+// We either force that `diff` and `process` always use mixed,
+// or we allow them to define specific types and use this hack
+type AnyAttributeType = AttributeType<$FlowFixMe, $FlowFixMe>;
+
+export type AttributeConfiguration = $ReadOnly<{
+  [propName: string]: AnyAttributeType,
+  style: $ReadOnly<{
+    [propName: string]: AnyAttributeType,
+    ...,
+  }>,
   ...
 }>;
 
-export type ReactNativeBaseComponentViewConfig<
-  TProps = string,
-  TStyleProps = string,
-> = $ReadOnly<{|
-  baseModuleName?: string,
+type PartialAttributeConfiguration = $ReadOnly<{
+  [propName: string]: AnyAttributeType,
+  style?: $ReadOnly<{
+    [propName: string]: AnyAttributeType,
+    ...,
+  }>,
+  ...
+}>;
+
+export type ViewConfig = $ReadOnly<{
+  Commands?: $ReadOnly<{[commandName: string]: number, ...}>,
+  Constants?: $ReadOnly<{[name: string]: mixed, ...}>,
+  Manager?: string,
+  NativeProps?: $ReadOnly<{[propName: string]: string, ...}>,
+  baseModuleName?: ?string,
   bubblingEventTypes?: $ReadOnly<{
-    [eventName: string]: $ReadOnly<{|
-      phasedRegistrationNames: $ReadOnly<{|
+    [eventName: string]: $ReadOnly<{
+      phasedRegistrationNames: $ReadOnly<{
         captured: string,
         bubbled: string,
-      |}>,
-    |}>,
+      }>,
+    }>,
     ...,
   }>,
-  Commands?: $ReadOnly<{[commandName: string]: number, ...}>,
   directEventTypes?: $ReadOnly<{
-    [eventName: string]: $ReadOnly<{|
+    [eventName: string]: $ReadOnly<{
       registrationName: string,
-    |}>,
+    }>,
     ...,
   }>,
-  NativeProps?: $ReadOnly<{[propName: string]: string, ...}>,
   uiViewClassName: string,
-  validAttributes: AttributeConfiguration<TProps, TStyleProps>,
-|}>;
+  validAttributes: AttributeConfiguration,
+}>;
 
-export type ViewConfigGetter = () => ReactNativeBaseComponentViewConfig<>;
+export type PartialViewConfig = $ReadOnly<{
+  bubblingEventTypes?: $PropertyType<ViewConfig, 'bubblingEventTypes'>,
+  directEventTypes?: $PropertyType<ViewConfig, 'directEventTypes'>,
+  uiViewClassName: string,
+  validAttributes?: PartialAttributeConfiguration,
+}>;
 
 export type NativeMethods = {
   blur(): void,
@@ -87,7 +104,7 @@ export type NativeMethods = {
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void,
   ): void,
-  setNativeProps(nativeProps: Object): void,
+  setNativeProps(nativeProps: {...}): void,
   ...
 };
 
@@ -111,9 +128,11 @@ type InspectorDataSource = $ReadOnly<{|
 |}>;
 
 type InspectorDataGetter = (
-  (componentOrHandle: any) => ?number,
+  <TElementType: ElementType>(
+    componentOrHandle: ElementRef<TElementType> | number,
+  ) => ?number,
 ) => $ReadOnly<{|
-  measure: Function,
+  measure: (callback: MeasureOnSuccessCallback) => void,
   props: InspectorDataProps,
   source: InspectorDataSource,
 |}>;
@@ -145,62 +164,65 @@ export type TouchedViewDataAtPoint = $ReadOnly<{|
  * Provide minimal Flow typing for the high-level RN API and call it a day.
  */
 export type ReactNativeType = {
-  findHostInstance_DEPRECATED(
-    componentOrHandle: any,
+  findHostInstance_DEPRECATED<TElementType: ElementType>(
+    componentOrHandle: ?(ElementRef<TElementType> | number),
   ): ?ElementRef<HostComponent<mixed>>,
-  findNodeHandle(componentOrHandle: any): ?number,
+  findNodeHandle<TElementType: ElementType>(
+    componentOrHandle: ?(ElementRef<TElementType> | number),
+  ): ?number,
   dispatchCommand(
     handle: ElementRef<HostComponent<mixed>>,
     command: string,
-    args: Array<any>,
+    args: Array<mixed>,
   ): void,
   sendAccessibilityEvent(
     handle: ElementRef<HostComponent<mixed>>,
     eventType: string,
   ): void,
   render(
-    element: React$Element<any>,
-    containerTag: any,
-    callback: ?Function,
-  ): any,
-  unmountComponentAtNode(containerTag: number): any,
-  unmountComponentAtNodeAndRemoveContainer(containerTag: number): any,
-  // TODO (bvaughn) Add types
-  unstable_batchedUpdates: any,
+    element: Element<ElementType>,
+    containerTag: number,
+    callback: ?() => void,
+  ): ?ElementRef<ElementType>,
+  unmountComponentAtNode(containerTag: number): void,
+  unmountComponentAtNodeAndRemoveContainer(containerTag: number): void,
+  unstable_batchedUpdates: <T>(fn: (T) => void, bookkeeping: T) => void,
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: SecretInternalsType,
   ...
 };
 
 export type ReactFabricType = {
-  findHostInstance_DEPRECATED(
-    componentOrHandle: any,
+  findHostInstance_DEPRECATED<TElementType: ElementType>(
+    componentOrHandle: ?(ElementRef<TElementType> | number),
   ): ?ElementRef<HostComponent<mixed>>,
-  findNodeHandle(componentOrHandle: any): ?number,
+  findNodeHandle<TElementType: ElementType>(
+    componentOrHandle: ?(ElementRef<TElementType> | number),
+  ): ?number,
   dispatchCommand(
     handle: ElementRef<HostComponent<mixed>>,
     command: string,
-    args: Array<any>,
+    args: Array<mixed>,
   ): void,
   sendAccessibilityEvent(
     handle: ElementRef<HostComponent<mixed>>,
     eventType: string,
   ): void,
   render(
-    element: React$Element<any>,
-    containerTag: any,
-    callback: ?Function,
-  ): any,
-  unmountComponentAtNode(containerTag: number): any,
+    element: Element<ElementType>,
+    containerTag: number,
+    callback: ?() => void,
+  ): ?ElementRef<ElementType>,
+  unmountComponentAtNode(containerTag: number): void,
   ...
 };
 
 export type ReactNativeEventTarget = {
-  node: Object,
+  node: {...},
   canonical: {
     _nativeTag: number,
-    viewConfig: ReactNativeBaseComponentViewConfig<>,
-    currentProps: Object,
-    _internalInstanceHandle: Object,
+    viewConfig: ViewConfig,
+    currentProps: {...},
+    _internalInstanceHandle: {...},
     ...
   },
   ...