Factor hardcoded image paths out in RNTester/Image example, get rid of .ico file

packages/rn-tester/js/examples/Image/ImageExample.js

@@ -22,10 +22,14 @@ const {
   View,
 } = require('react-native');
 
+const IMAGE1 =
+  'https://www.facebook.com/assets/fb_lite_messaging/E2EE-settings@3x.png';
+const IMAGE2 =
+  'https://www.facebook.com/ar_effect/external_textures/648609739826677.png';
+
 const base64Icon =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
-const IMAGE_PREFETCH_URL =
-  'https://www.facebook.com/favicon.ico?r=1&t=' + Date.now();
+const IMAGE_PREFETCH_URL = `${IMAGE1}?r=1&t=${Date.now()}`;
 const prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
 
 type ImageSource = $ReadOnly<{|
@@ -155,7 +159,7 @@ class NetworkImageCallbackExample extends React.Component<
               prefetchTask.then(
                 () => {
                   this._loadEventFired(
-                    `✔ Prefetch OK (+${Date.now() - mountTime}ms)`,
+                    `✔ prefetch OK (+${Date.now() - mountTime}ms)`,
                   );
                   // $FlowFixMe[unused-promise]
                   Image.queryCache([IMAGE_PREFETCH_URL]).then(map => {
@@ -175,7 +179,7 @@ class NetworkImageCallbackExample extends React.Component<
                 },
                 error => {
                   this._loadEventFired(
-                    `✘ Prefetch failed (+${Date.now() - mountTime}ms)`,
+                    `✘ prefetch failed (+${Date.now() - mountTime}ms)`,
                   );
                 },
               );
@@ -364,12 +368,12 @@ class MultipleSourcesExample extends React.Component<
             style={styles.flex}
             source={[
               {
-                uri: 'https://www.facebook.com/favicon.ico',
+                uri: IMAGE1,
                 width: 38,
                 height: 38,
               },
               {
-                uri: 'https://www.facebook.com/ads/pics/successstories.png',
+                uri: IMAGE2,
                 width: 100,
                 height: 100,
               },
@@ -407,7 +411,7 @@ class LoadingIndicatorSourceExample extends React.Component<
 
   render(): React.Node {
     const loadingImage = {
-      uri: `https://www.facebook.com/ads/pics/successstories.png?hash=${this.state.imageHash}`,
+      uri: `${IMAGE2}?hash=${this.state.imageHash}`,
     };
 
     return (
@@ -429,6 +433,45 @@ class LoadingIndicatorSourceExample extends React.Component<
   }
 }
 
+type FadeDurationExampleState = {|
+  imageHash: number,
+|};
+
+type FadeDurationExampleProps = $ReadOnly<{||}>;
+
+class FadeDurationExample extends React.Component<
+  FadeDurationExampleProps,
+  FadeDurationExampleState,
+> {
+  state: FadeDurationExampleState = {
+    imageHash: Date.now(),
+  };
+
+  reloadImage = () => {
+    this.setState({
+      imageHash: Date.now(),
+    });
+  };
+
+  render(): React.Node {
+    const loadingImage = {
+      uri: `${IMAGE2}?hash=${this.state.imageHash}`,
+    };
+
+    return (
+      <View>
+        <View style={styles.spaceBetweenView}>
+          <Text style={styles.touchableText} onPress={this.reloadImage}>
+            Refresh Image
+          </Text>
+        </View>
+        <Image fadeDuration={1500} source={loadingImage} style={styles.base} />
+        <Text>This image will fade in over the time of 1.5s.</Text>
+      </View>
+    );
+  }
+}
+
 type OnLayoutExampleState = {|
   width: number,
   height: number,
@@ -497,17 +540,17 @@ class OnLayoutExample extends React.Component<
             style={styles.flex}
             source={[
               {
-                uri: 'https://www.facebook.com/favicon.ico',
+                uri: IMAGE1,
                 width: 38,
                 height: 38,
               },
               {
-                uri: 'https://www.facebook.com/favicon.ico',
+                uri: IMAGE1,
                 width: 76,
                 height: 76,
               },
               {
-                uri: 'https://www.facebook.com/ads/pics/successstories.png',
+                uri: IMAGE2,
                 width: 400,
                 height: 400,
               },
@@ -559,10 +602,10 @@ class OnPartialLoadExample extends React.Component<
 }
 
 const fullImage: ImageSource = {
-  uri: 'https://www.facebook.com/ads/pics/successstories.png',
+  uri: IMAGE2,
 };
 const smallImage = {
-  uri: 'https://www.facebook.com/favicon.ico',
+  uri: IMAGE1,
 };
 
 const styles = StyleSheet.create({
@@ -795,9 +838,7 @@ exports.examples = [
         <Image
           width={64}
           height={64}
-          srcSet={
-            'https://www.facebook.com/ads/pics/successstories.png 4x, https://www.facebook.com/favicon.ico 2x'
-          }
+          srcSet={`${IMAGE2} 4x, ${IMAGE1} 2x`}
           style={styles.base}
         />
       );
@@ -808,14 +849,7 @@ exports.examples = [
     description: ('If the `source` prop `uri` property is an object URL, ' +
       'then it will be resolved using `BlobProvider` (Android) or `RCTBlobManager` (iOS).': string),
     render: function (): React.Node {
-      return (
-        <BlobImageExample
-          urls={[
-            'https://www.facebook.com/favicon.ico',
-            'https://www.facebook.com/ads/pics/successstories.png',
-          ]}
-        />
-      );
+      return <BlobImageExample urls={[IMAGE1, IMAGE2]} />;
     },
   },
   {
@@ -852,7 +886,7 @@ exports.examples = [
       return (
         <NetworkImageCallbackExample
           source={{
-            uri: 'https://www.facebook.com/favicon.ico?r=1&t=' + Date.now(),
+            uri: `${IMAGE1}?r=1&t=${Date.now()}`,
           }}
           prefetchedSource={{uri: IMAGE_PREFETCH_URL}}
         />
@@ -865,7 +899,7 @@ exports.examples = [
       return (
         <NetworkImageExample
           source={{
-            uri: 'https://www.facebook.com/favicon_TYPO.ico',
+            uri: IMAGE1 + '_TYPO',
           }}
         />
       );
@@ -877,7 +911,7 @@ exports.examples = [
       return (
         <NetworkImageExample
           source={{
-            uri: 'https://www.facebook.com/favicon.ico?r=1',
+            uri: `${IMAGE1}?r=1`,
           }}
         />
       );
@@ -1448,12 +1482,7 @@ exports.examples = [
     description:
       ('The time (in miliseconds) that an image will fade in for when it appears (default = 300).': string),
     render: function (): React.Node {
-      return (
-        <>
-          <Image fadeDuration={1500} source={fullImage} style={styles.base} />
-          <Text>This image will fade in over the time of 1.5s.</Text>
-        </>
-      );
+      return <FadeDurationExample />;
     },
     platform: 'android',
   },