From 69af5b68a34570e95b5188f7c77c8024508164b5 Mon Sep 17 00:00:00 2001
From: Ruslan Shestopalyuk <rshest@meta.com>
Date: Sun, 5 May 2024 02:49:29 -0700
Subject: [PATCH] Add "Refresh Image" to RNTester Image.fadeDuration example

Summary:
# Changelog:
[Internal] -

I noticed that "Image/Fade Duration" test in RNTester is practically useless, as at the moment one scrolls to the test, the fading is most probably had already ended.

This adds a "button" to refresh the image and be able to see the fading in again and again, if desired.

Differential Revision: D56978930
---
 .../js/examples/Image/ImageExample.js         | 46 ++++++++++++++++---
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js
index 4f18636bdba601..2cd72f93e34bc7 100644
--- a/packages/rn-tester/js/examples/Image/ImageExample.js
+++ b/packages/rn-tester/js/examples/Image/ImageExample.js
@@ -429,6 +429,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: `https://www.facebook.com/ads/pics/successstories.png?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,
@@ -1448,12 +1487,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',
   },