added support for image source object

packages/docs/src/components/Image/Image.stories.mdx

@@ -19,6 +19,7 @@ An accessible and responsive image component.
 | onLoad                    | ?Function | false |
 | onLoadEnd                 | ?Function | false |
 | onLoadStart               | ?Function | false |
+| onProgress                | ?Function | false |
 | resizeMode                | ?ResizeMode | 'cover' |
 | source                    | Source    | false |
 | style                     | ?Style    | |
@@ -72,6 +73,16 @@ Called when load completes successfully.
   </Story>
 </Preview>
 
+### onProgress
+
+Invoked on download progress.
+
+<Preview withSource='none'>
+  <Story name="onProgress">
+    <Stories.onProgress />
+  </Story>
+</Preview>
+
 ### resizeMode
 
 Determines how to resize the image when the frame doesn't match the raw image dimensions.
@@ -91,7 +102,7 @@ type ResizeMode = 'center' | 'contain' | 'cover' | 'none' | 'repeat' | 'stretch'
 The source `uri` is a string representing the resource identifier for the image, which could be an http address or a base64 encoded image.
 
 ```js
-type Source = { uri: string, width: number, height: number }
+type Source = { uri: string, width: number, height: number, method?: string, headers?: object }
 ```
 
 <Preview withSource='none'>

packages/docs/src/components/Image/examples/NetworkImage.js

@@ -6,7 +6,8 @@ import { ActivityIndicator, Image, Text, View } from 'react-native';
 class NetworkImageExample extends PureComponent {
   state = {
     error: false,
-    loading: false
+    loading: false,
+    messages: []
   };
 
   static defaultProps = {
@@ -29,44 +30,94 @@ class NetworkImageExample extends PureComponent {
           onLoad={this._handleLoad}
           onLoadEnd={this._handleLoadEnd}
           onLoadStart={this._handleLoadStart}
+          onProgress={this._handleProgress}
           source={this.props.source}
           style={helpers.styles.base}
         />
-        {this.state.message && <Text style={helpers.styles.marginTop}>{this.state.message}</Text>}
+        {this.state.messages.map((message, index) => {
+          return (
+            <Text key={index} style={helpers.styles.marginTop}>
+              {message}
+            </Text>
+          );
+        })}
       </View>
     );
   }
 
   _handleError = e => {
-    const nextState = { loading: false };
-    if (this.props.logMethod === 'onError') {
-      nextState.message = `✘ onError ${JSON.stringify(e.nativeEvent)}`;
-    }
-    this.setState(() => nextState);
+    this.setState(state => {
+      const messages = [...state.messages];
+      if (this.props.logMethod === 'onError') {
+        messages.push(`✘ onError ${JSON.stringify(e.nativeEvent)}`);
+      }
+
+      return {
+        loading: false,
+        messages
+      };
+    });
   };
 
   _handleLoad = () => {
-    const nextState = { loading: false };
-    if (this.props.logMethod === 'onLoad') {
-      nextState.message = '✔ onLoad';
-    }
-    this.setState(() => nextState);
+    this.setState(state => {
+      const messages = [...state.messages];
+      if (this.props.logMethod === 'onLoad') {
+        messages.push('✔ onLoad');
+      }
+
+      return {
+        loading: false,
+        messages
+      };
+    });
   };
 
   _handleLoadEnd = () => {
-    const nextState = { loading: false };
-    if (this.props.logMethod === 'onLoadEnd') {
-      nextState.message = '✔ onLoadEnd';
-    }
-    this.setState(() => nextState);
+    this.setState(state => {
+      const messages = [...state.messages];
+      if (this.props.logMethod === 'onLoadEnd') {
+        messages.push('✔ onLoadEnd');
+      }
+
+      return {
+        loading: false,
+        messages
+      };
+    });
   };
 
   _handleLoadStart = () => {
-    const nextState = { loading: true };
-    if (this.props.logMethod === 'onLoadStart') {
-      nextState.message = '✔ onLoadStart';
-    }
-    this.setState(() => nextState);
+    this.setState(state => {
+      const messages = [...state.messages];
+      if (this.props.logMethod === 'onLoadStart') {
+        messages.push('✔ onLoadStart');
+      }
+
+      return {
+        loading: false,
+        messages
+      };
+    });
+  };
+
+  _handleProgress = e => {
+    this.setState(state => {
+      const messages = [...state.messages];
+      if (this.props.logMethod === 'onProgress') {
+        const { loaded, total } = e.nativeEvent;
+        messages.push(
+          `✔ onProgress ${JSON.stringify({
+            loaded,
+            total
+          })}`
+        );
+      }
+
+      return {
+        messages
+      };
+    });
   };
 }
 

packages/docs/src/components/Image/examples/OnProgress.js

@@ -0,0 +1,8 @@
+import { createUncachedURI } from '../helpers';
+import NetworkImage from './NetworkImage';
+import React from 'react';
+import sources from '../sources';
+
+export default function OnProgress() {
+  return <NetworkImage logMethod="onProgress" source={createUncachedURI(sources.dynamic)} />;
+}

packages/docs/src/components/Image/examples/Source.js

@@ -33,6 +33,16 @@ export default function Source() {
           <Image source={sources.dataSvg} style={styles.image} />
         </View>
       </View>
+      <View style={styles.row}>
+        <View style={styles.column}>
+          <Text style={styles.text}>WebP</Text>
+          <Image source={sources.webP} style={styles.image} />
+        </View>
+        <View style={styles.column}>
+          <Text style={styles.text}>Dynamic (POST)</Text>
+          <Image source={sources.dynamic} style={styles.image} />
+        </View>
+      </View>
     </React.Fragment>
   );
 }

packages/docs/src/components/Image/examples/index.js

@@ -4,6 +4,7 @@ export { default as onError } from './OnError';
 export { default as onLoad } from './OnLoad';
 export { default as onLoadEnd } from './OnLoadEnd';
 export { default as onLoadStart } from './OnLoadStart';
+export { default as onProgress } from './OnProgress';
 export { default as resizeMode } from './ResizeMode';
 export { default as source } from './Source';
 export { default as styleBoxShadow } from './StyleBoxShadow';

packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap

@@ -328,14 +328,14 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 >
   <div
     class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="filter: url(#tint-57);"
+    style="filter: url(#tint-55);"
   />
   <svg
     style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
   >
     <defs>
       <filter
-        id="tint-57"
+        id="tint-55"
       >
         <feflood
           flood-color="blue"
@@ -377,7 +377,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
 >
   <div
     class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-56);"
+    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-54);"
   />
   <img
     alt=""
@@ -390,7 +390,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
   >
     <defs>
       <filter
-        id="tint-56"
+        id="tint-54"
       >
         <feflood
           flood-color="red"

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

@@ -9,7 +9,7 @@ import PixelRatio from '../../PixelRatio';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-const originalImage = window.Image;
+const OriginalImage = window.Image;
 
 describe('components/Image', () => {
   beforeEach(() => {
@@ -18,7 +18,7 @@ describe('components/Image', () => {
   });
 
   afterEach(() => {
-    window.Image = originalImage;
+    window.Image = OriginalImage;
   });
 
   test('prop "accessibilityLabel"', () => {
@@ -91,8 +91,9 @@ describe('components/Image', () => {
   describe('prop "onLoad"', () => {
     test('is called after image is loaded from network', () => {
       jest.useFakeTimers();
+      const uri = 'https://test.com/img.jpg';
       ImageLoader.load = jest.fn().mockImplementation((_, onLoad, onError) => {
-        onLoad();
+        onLoad(uri);
       });
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
@@ -102,7 +103,7 @@ describe('components/Image', () => {
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
           onLoadStart={onLoadStartStub}
-          source="https://test.com/img.jpg"
+          source={uri}
         />
       );
       jest.runOnlyPendingTimers();
@@ -111,13 +112,13 @@ describe('components/Image', () => {
 
     test('is called after image is loaded from cache', () => {
       jest.useFakeTimers();
+      const uri = 'https://test.com/img.jpg';
       ImageLoader.load = jest.fn().mockImplementation((_, onLoad, onError) => {
-        onLoad();
+        onLoad(uri);
       });
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
       const onLoadEndStub = jest.fn();
-      const uri = 'https://test.com/img.jpg';
       ImageUriCache.add(uri);
       render(
         <Image
@@ -238,7 +239,7 @@ describe('components/Image', () => {
     test('is set immediately if the image was preloaded', () => {
       const uri = 'https://yahoo.com/favicon.ico';
       ImageLoader.load = jest.fn().mockImplementationOnce((_, onLoad, onError) => {
-        onLoad();
+        onLoad(uri);
       });
       return Image.prefetch(uri).then(() => {
         const source = { uri };
@@ -285,7 +286,7 @@ describe('components/Image', () => {
       const { container } = render(<Image defaultSource={{ uri: defaultUri }} source={{ uri }} />);
       expect(container.firstChild).toMatchSnapshot();
       act(() => {
-        loadCallback();
+        loadCallback(uri);
       });
       expect(container.firstChild).toMatchSnapshot();
     });