From 1f1e0e1c0c3ae060d50f5587c3452fde3872bcd3 Mon Sep 17 00:00:00 2001 From: Ruslan Shestopalyuk Date: Sun, 5 May 2024 08:17:37 -0700 Subject: [PATCH 1/2] [skip ci] Add "Refresh Image" to RNTester Image.fadeDuration example (#44414) 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 4f18636bdba6..2cd72f93e34b 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 ( + + + + Refresh Image + + + + This image will fade in over the time of 1.5s. + + ); + } +} + 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 ( - <> - - This image will fade in over the time of 1.5s. - - ); + return ; }, platform: 'android', }, From 215054c1fa3cb03f444c5953310b71477b22507a Mon Sep 17 00:00:00 2001 From: Ruslan Shestopalyuk Date: Sun, 5 May 2024 08:17:37 -0700 Subject: [PATCH 2/2] 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 2cd72f93e34b..3a43e9a1a648 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 = [ ); @@ -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 ( - - ); + return ; }, }, { @@ -891,7 +886,7 @@ exports.examples = [ return ( @@ -904,7 +899,7 @@ exports.examples = [ return ( ); @@ -916,7 +911,7 @@ exports.examples = [ return ( );