diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js index 4f18636bdba..2cd72f93e34 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', },