Factor hardcoded image paths out in RNTester/Image example, get rid o…

…f .ico file (#44415)

Summary:
Pull Request resolved: #44415

# 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

Reviewed By: christophpurrer

Differential Revision: D56978929

fbshipit-source-id: c627d1671c8cb66e9a78f4382faa56e539b2f7b3

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/[email protected]';
+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`,
  }}
  />
  );