Further improvements to Flow types

Close #1985

packages/react-native-web/src/exports/AppRegistry/index.js

@@ -8,14 +8,17 @@
  * @flow
  */
 
-import type { ComponentType } from 'react';
+import type { ComponentType, Node } from 'react';
 
 import invariant from 'fbjs/lib/invariant';
 import unmountComponentAtNode from '../unmountComponentAtNode';
 import renderApplication, { getApplication } from './renderApplication';
 
-const emptyObject = {};
-const runnables = {};
+type AppParams = Object;
+type Runnable = {|
+  getApplication?: (AppParams) => {| element: Node, getStyleElement: (any) => Node |},
+  run: (AppParams) => any
+|};
 
 export type ComponentProvider = () => ComponentType<any>;
 export type ComponentProviderInstrumentationHook = (
@@ -23,11 +26,6 @@ export type ComponentProviderInstrumentationHook = (
 ) => ComponentType<any>;
 export type WrapperComponentProvider = (any) => ComponentType<*>;
 
-let componentProviderInstrumentationHook: ComponentProviderInstrumentationHook = (
-  component: ComponentProvider
-) => component();
-let wrapperComponentProvider: ?WrapperComponentProvider;
-
 export type AppConfig = {
   appKey: string,
   component?: ComponentProvider,
@@ -35,6 +33,14 @@ export type AppConfig = {
   section?: boolean
 };
 
+const emptyObject = {};
+const runnables: {| [appKey: string]: Runnable |} = {};
+
+let componentProviderInstrumentationHook: ComponentProviderInstrumentationHook = (
+  component: ComponentProvider
+) => component();
+let wrapperComponentProvider: ?WrapperComponentProvider;
+
 /**
  * `AppRegistry` is the JS entry point to running all React Native apps.
  */
@@ -43,7 +49,10 @@ export default class AppRegistry {
     return Object.keys(runnables);
   }
 
-  static getApplication(appKey: string, appParameters?: Object): string {
+  static getApplication(
+    appKey: string,
+    appParameters?: AppParams
+  ): {| element: Node, getStyleElement: (any) => Node |} {
     invariant(
       runnables[appKey] && runnables[appKey].getApplication,
       `Application ${appKey} has not been registered. ` +

packages/react-native-web/src/exports/AppRegistry/renderApplication.js

@@ -8,7 +8,7 @@
  * @flow
  */
 
-import type { ComponentType } from 'react';
+import type { ComponentType, Node } from 'react';
 
 import AppContainer from './AppContainer';
 import invariant from 'fbjs/lib/invariant';
@@ -44,7 +44,7 @@ export function getApplication(
   RootComponent: ComponentType<Object>,
   initialProps: Object,
   WrapperComponent?: ?ComponentType<*>
-): Object {
+): {| element: Node, getStyleElement: (Object) => Node |} {
   const element = (
     <AppContainer WrapperComponent={WrapperComponent} rootTag={{}}>
       <RootComponent {...initialProps} />

packages/react-native-web/src/exports/Dimensions/index.js

@@ -19,8 +19,8 @@ export type DisplayMetrics = {|
 |};
 
 type DimensionsValue = {|
-  window?: DisplayMetrics,
-  screen?: DisplayMetrics
+  window: DisplayMetrics,
+  screen: DisplayMetrics
 |};
 
 type DimensionKey = 'window' | 'screen';

packages/react-native-web/src/exports/Image/index.js

@@ -132,6 +132,16 @@ function resolveAssetUri(source): ?string {
   return uri;
 }
 
+interface ImageStatics {
+  getSize: (
+    uri: string,
+    success: (width: number, height: number) => void,
+    failure: () => void
+  ) => void;
+  prefetch: (uri: string) => Promise<void>;
+  queryCache: (uris: Array<string>) => Promise<{| [uri: string]: 'disk/memory' |}>;
+}
+
 const Image: React.AbstractComponent<ImageProps, React.ElementRef<typeof View>> = React.forwardRef(
   (props, ref) => {
     const {
@@ -294,18 +304,22 @@ const Image: React.AbstractComponent<ImageProps, React.ElementRef<typeof View>>
 
 Image.displayName = 'Image';
 
-// $FlowFixMe
-Image.getSize = function (uri, success, failure) {
+// $FlowIgnore: This is the correct type, but casting makes it unhappy since the variables aren't defined yet
+const ImageWithStatics = (Image: React.AbstractComponent<
+  ImageProps,
+  React.ElementRef<typeof View>
+> &
+  ImageStatics);
+
+ImageWithStatics.getSize = function (uri, success, failure) {
   ImageLoader.getSize(uri, success, failure);
 };
 
-// $FlowFixMe
-Image.prefetch = function (uri) {
+ImageWithStatics.prefetch = function (uri) {
   return ImageLoader.prefetch(uri);
 };
 
-// $FlowFixMe
-Image.queryCache = function (uris) {
+ImageWithStatics.queryCache = function (uris) {
   return ImageLoader.queryCache(uris);
 };
 
@@ -364,4 +378,4 @@ const resizeModeStyles = StyleSheet.create({
   }
 });
 
-export default Image;
+export default ImageWithStatics;

packages/react-native-web/src/exports/Image/types.js

@@ -108,6 +108,6 @@ export type ImageProps = {
   onLoadStart?: (e: any) => void,
   onProgress?: (e: any) => void,
   resizeMode?: ResizeMode,
-  source: Source,
+  source?: Source,
   style?: GenericStyleProp<ImageStyle>
 };

packages/react-native-web/src/exports/PanResponder/index.js

@@ -1,2 +1,4 @@
+// @flow strict
+
 import PanResponder from '../../vendor/react-native/PanResponder';
 export default PanResponder;

packages/react-native-web/src/modules/ImageLoader/index.js

@@ -82,7 +82,7 @@ const ImageLoader = {
       delete requests[`${requestId}`];
     }
   },
-  getSize(uri: string, success: Function, failure: Function) {
+  getSize(uri: string, success: (width: number, height: number) => void, failure: () => void) {
     let complete = false;
     const interval = setInterval(callback, 16);
     const requestId = ImageLoader.load(uri, callback, errorCallback);
@@ -133,7 +133,7 @@ const ImageLoader = {
     requests[`${id}`] = image;
     return id;
   },
-  prefetch(uri: string): Promise<*> {
+  prefetch(uri: string): Promise<void> {
     return new Promise((resolve, reject) => {
       ImageLoader.load(
         uri,
@@ -148,7 +148,7 @@ const ImageLoader = {
       );
     });
   },
-  queryCache(uris: Array<string>): Object {
+  queryCache(uris: Array<string>): Promise<{| [uri: string]: 'disk/memory' |}> {
     const result = {};
     uris.forEach((u) => {
       if (ImageUriCache.has(u)) {

packages/react-native-web/src/types/index.js

@@ -46,13 +46,16 @@ export type PointValue = {|
   y: number
 |};
 
-type LayoutCallback = ({
-  ...LayoutValue,
+type LayoutCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
   left: number,
   top: number
-}) => void;
+) => void;
 
-type MeasureInWindowCallback = (EdgeInsetsValue) => void;
+type MeasureInWindowCallback = (left: number, top: number, width: number, height: number) => void;
 
 // Mixin to HTMLElement that represents additions from the `usePlatformMethods` hook
 export interface PlatformMethods {

packages/react-native-web/src/vendor/react-native/Types/CoreEventTypes.js

@@ -13,7 +13,7 @@
 export type SyntheticEvent<T> = $ReadOnly<{|
   bubbles: ?boolean,
   cancelable: ?boolean,
-  currentTarget: number,
+  currentTarget: HTMLElement,
   defaultPrevented: ?boolean,
   dispatchConfig: $ReadOnly<{|
     registrationName: string,
@@ -26,7 +26,7 @@ export type SyntheticEvent<T> = $ReadOnly<{|
   isTrusted: ?boolean,
   nativeEvent: T,
   persist: () => void,
-  target: ?number,
+  target: ?HTMLElement,
   timeStamp: number,
   type: ?string,
 |}>;
@@ -91,7 +91,7 @@ export type PressEvent = ResponderSyntheticEvent<
     locationY: number,
     pageX: number,
     pageY: number,
-    target: ?number,
+    target: ?HTMLElement,
     timestamp: number,
     touches: $ReadOnlyArray<$PropertyType<PressEvent, 'nativeEvent'>>,
   |}>,