From 2455fd662bbc60683621941b464abf45db3d0289 Mon Sep 17 00:00:00 2001
From: Eli White <eliwhite@fb.com>
Date: Tue, 19 Jun 2018 21:28:02 -0700
Subject: [PATCH] Tightening the flow types for Image

Reviewed By: sahrens

Differential Revision: D8529116

fbshipit-source-id: 5ce4a7737d8837ca9a9c94054e1d1182fb38c094
---
 Libraries/Image/ImageProps.js | 64 +++++++++++++++++++++++++----------
 RNTester/js/ImageExample.js   |  1 -
 2 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/Libraries/Image/ImageProps.js b/Libraries/Image/ImageProps.js
index 46d367fcc..54f6250e1 100644
--- a/Libraries/Image/ImageProps.js
+++ b/Libraries/Image/ImageProps.js
@@ -16,35 +16,63 @@ const ImageStylePropTypes = require('ImageStylePropTypes');
 const PropTypes = require('prop-types');
 const StyleSheetPropType = require('StyleSheetPropType');
 
+import type {DimensionValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
 import type {ImageSource} from 'ImageSource';
 import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
-import type {LayoutEvent, SyntheticEvent} from 'CoreEventTypes';
+import type {SyntheticEvent} from 'CoreEventTypes';
 import type {ImageStyleProp} from 'StyleSheet';
 
-export type ImageProps = {
-  accessible?: boolean,
-  accessibilityLabel?: ?(string | Array<any> | any),
-  blurRadius?: number,
-  capInsets?: ?EdgeInsetsProp,
+type OnLoadEvent = SyntheticEvent<
+  $ReadOnly<{|
+    // Only on Android
+    uri?: string,
 
-  onError?: ?(event: SyntheticEvent<$ReadOnly<{||}>>) => void,
-  onLayout?: ?(event: LayoutEvent) => void,
-  onLoad?: ?() => void,
-  onLoadEnd?: ?() => void,
-  onLoadStart?: ?() => void,
-  resizeMethod?: ?('auto' | 'resize' | 'scale'),
-  resizeMode?: ?('cover' | 'contain' | 'stretch' | 'repeat' | 'center'),
-  source?: ?ImageSource,
-  style?: ImageStyleProp,
-  testID?: ?string,
+    source: $ReadOnly<{|
+      width: number,
+      height: number,
+      url: string,
+    |}>,
+  |}>,
+>;
 
-  // ios
+type IOSImageProps = $ReadOnly<{|
   defaultSource?: ?ImageSource,
   onPartialLoad?: ?() => void,
   onProgress?: ?(
     event: SyntheticEvent<$ReadOnly<{|loaded: number, total: number|}>>,
   ) => void,
-};
+|}>;
+
+type AndroidImageProps = $ReadOnly<{|
+  loadingIndicatorSource?: ?(number | $ReadOnly<{|uri: string|}>),
+  progressiveRenderingEnabled?: ?boolean,
+  fadeDuration?: ?number,
+|}>;
+
+export type ImageProps = {|
+  ...ViewProps,
+  ...IOSImageProps,
+  ...AndroidImageProps,
+  blurRadius?: number,
+  capInsets?: ?EdgeInsetsProp,
+
+  onError?: ?(event: SyntheticEvent<$ReadOnly<{||}>>) => void,
+  onLoad?: ?(event: OnLoadEvent) => void,
+  onLoadEnd?: ?() => void,
+  onLoadStart?: ?() => void,
+  resizeMethod?: ?('auto' | 'resize' | 'scale'),
+  source?: ?ImageSource,
+  style?: ImageStyleProp,
+
+  // Can be set via props or style, for now
+  height?: DimensionValue,
+  width?: DimensionValue,
+  resizeMode?: ?('cover' | 'contain' | 'stretch' | 'repeat' | 'center'),
+
+  src?: empty,
+  children?: empty,
+|};
 
 module.exports = {
   /**
diff --git a/RNTester/js/ImageExample.js b/RNTester/js/ImageExample.js
index 5465b6608..fdabeae35 100644
--- a/RNTester/js/ImageExample.js
+++ b/RNTester/js/ImageExample.js
@@ -60,7 +60,6 @@ var NetworkImageCallbackExample = createReactClass({
             this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)
           }
           onLoad={event => {
-            // Currently this image source feature is only available on iOS.
             if (event.nativeEvent.source) {
               const url = event.nativeEvent.source.url;
               this._loadEventFired(