From 215054c1fa3cb03f444c5953310b71477b22507a Mon Sep 17 00:00:00 2001
From: Ruslan Shestopalyuk <rshest@meta.com>
Date: Sun, 5 May 2024 08:17:37 -0700
Subject: [PATCH] Factor hardcoded image paths out in RNTester/Image example,
 get rid of .ico file (#44415)

Summary:

# Changelog:
[Internal] -

RNTester Image example used hardcoded `https://www.facebook.com/favicon.ico`, which has an uncommon ICO format, for no good reason aside of just this image being served from `facebook.com`.

This diff:
* Replaces the ICO image with a PNG one (which is still served from `facebook.com`
* Factors out all the multiple hardcoded paths into constants, so that it's easier to make such changes in the future
* Changes another image to something that is a bit better on the eyes when severely downscaled

Differential Revision: D56978929
---
 .../js/examples/Image/ImageExample.js         | 49 +++++++++----------
 1 file changed, 22 insertions(+), 27 deletions(-)

diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js
index 2cd72f93e34bc7..3a43e9a1a6483b 100644
--- a/packages/rn-tester/js/examples/Image/ImageExample.js
+++ b/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 (
@@ -451,7 +455,7 @@ class FadeDurationExample 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 (
@@ -536,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,
               },
@@ -598,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({
@@ -834,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}
         />
       );
@@ -847,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]} />;
     },
   },
   {
@@ -891,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}}
         />
@@ -904,7 +899,7 @@ exports.examples = [
       return (
         <NetworkImageExample
           source={{
-            uri: 'https://www.facebook.com/favicon_TYPO.ico',
+            uri: IMAGE1 + '_TYPO',
           }}
         />
       );
@@ -916,7 +911,7 @@ exports.examples = [
       return (
         <NetworkImageExample
           source={{
-            uri: 'https://www.facebook.com/favicon.ico?r=1',
+            uri: `${IMAGE1}?r=1`,
           }}
         />
       );