Address flow type issues

Author: kidroca

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

@@ -8,7 +8,7 @@
  * @flow
  */
 
-import type { ImageResult } from '../../modules/ImageLoader';
+import type { ImageResult, ImageSource } from '../../modules/ImageLoader';
 import type { ImageProps, Source, ImageLoadingProps } from './types';
 
 import * as React from 'react';
@@ -100,7 +100,7 @@ function resolveAssetDimensions(source: ImageSource) {
   return { height, width };
 }
 
-function resolveSource(source: ?Source): Source {
+function resolveSource(source: ?Source): ImageSource {
   let resolvedSource = { uri: '' };
 
   if (typeof source === 'number') {
@@ -117,7 +117,7 @@ function resolveSource(source: ?Source): Source {
 
     return resolveSource(source[0]);
   } else if (source && typeof source.uri === 'string') {
-    resolvedSource = resolveObjectSource((source: Source));
+    resolvedSource = resolveObjectSource(source);
   }
 
   if (resolvedSource.uri) {
@@ -135,6 +135,8 @@ function resolveSource(source: ?Source): Source {
 // get the URI from the packager
 function resolveNumericSource(source: number): ImageSource {
   const asset = getAssetByID(source);
+  if (!asset) return { uri: '' };
+
   let scale = asset.scales[0];
   if (asset.scales.length > 1) {
     const preferredScale = PixelRatio.get();
@@ -148,25 +150,22 @@ function resolveNumericSource(source: number): ImageSource {
 
   const scaleSuffix = scale !== 1 ? `@${scale}x` : '';
   const uri = `${asset.httpServerLocation}/${asset.name}${scaleSuffix}.${asset.type}`;
+  const { height, width } = asset;
 
-  return {
-    uri,
-    width: asset.width,
-    height: asset.height
-  };
+  return { uri, height, width };
 }
 
 function resolveStringSource(source: string): ImageSource {
   return { uri: source };
 }
 
-function resolveObjectSource(source: Source): ImageSource {
-  return source;
+function resolveObjectSource(source: Object): ImageSource {
+  return (source: ImageSource);
 }
 
 function resolveSvgDataUriSource(
-  source: Source,
-  match: RegExpMatchArray
+  source: Object,
+  match: Array<string>
 ): ImageSource {
   const [, prefix, svg] = match;
   // inline SVG markup may contain characters (e.g., #, ") that need to be escaped
@@ -189,10 +188,10 @@ function resolveBlobUri(source: ImageSource): ImageSource {
 function getSourceToDisplay(main, fallback) {
   if (main.status === LOADED) return main.source;
 
-  if (main.satus === LOADING && !fallback.source.uri) {
+  if (main.status === LOADING && !fallback.source.uri) {
     // Most of the time it's safe to use the main URI as img.src before loading
     // But it should not be used when the image would be loaded using `fetch` with headers
-    if (!main.headers) return main.source;
+    if (!main.source.headers) return main.source;
   }
 
   return fallback.source;
@@ -348,27 +347,25 @@ ImageWithStatics.queryCache = function (uris) {
   return ImageLoader.queryCache(uris);
 };
 
-// Todo: see if we can just use `result` as `source` (width|height might cause problems)
-
 /**
  * Image loading/state management hook
  * @param callbacks
  * @param source
- * @returns {{state: string, uri: string}}
+ * @returns {{status: string, source: ImageSource}}
  */
 const useSource = (
   callbacks: ImageLoadingProps,
   source: ?Source
-): { status: IDLE | LOADING | LOADED | ERRORED, source: ImageSource } => {
-  const [resolvedSource, setResolvedSource] = React.useState(() =>
+): { status: string, source: ImageSource } => {
+  const [resolvedSource, setResolvedSource] = React.useState<ImageSource>(() =>
     resolveSource(source)
   );
 
   const [status, setStatus] = React.useState(() =>
     ImageLoader.has(resolveSource.uri) ? LOADED : IDLE
   );
 
-  const [result, setResult] = React.useState(resolvedSource);
+  const [result, setResult] = React.useState<ImageSource>(resolvedSource);
 
   // Trigger a resolved source change when necessary
   React.useEffect(() => {
@@ -401,7 +398,7 @@ const useSource = (
       if (onLoadEnd) onLoadEnd();
 
       setStatus(LOADED);
-      setResult(result.source);
+      setResult({ ...resolvedSource, ...result.source });
     }
 
     function handleError() {

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

@@ -104,7 +104,7 @@ export type ImageStyle = {
 };
 
 export type ImageLoadingProps = {|
-  onLoad?: (e: ImageResult) => void,
+  onLoad?: (e: { nativeEvent: ImageResult }) => void,
   onLoadStart?: () => void,
   onLoadEnd?: () => void,
   onError?: ({ nativeEvent: { error: string } }) => void,

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

@@ -209,11 +209,11 @@ const ImageLoader = {
     return Promise.resolve(result);
   },
   resolveBlobUri(uri: string): string {
-    const request = Object.values(requests).find(
-      ({ source }) => source.uri === uri
-    );
-    if (request) {
-      return request.image.src;
+    for (const key in requests) {
+      const request = requests[key];
+      if (request.source.uri === uri) {
+        return request.image.src;
+      }
     }
 
     return uri;

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

@@ -10,13 +10,15 @@
 
 export type ImageSource = {|
   uri: string,
-  headers?: { [key: string]: string }
+  headers?: { [key: string]: string },
+  width?: ?number,
+  height?: ?number
 |};
 
 export type ImageResult = {|
-  source: {
+  source: {|
     uri: string,
     width: number,
     height: number
-  }
+  |}
 |};