Skip to content

Commit

Permalink
Add "Refresh Image" to RNTester Image.fadeDuration example
Browse files Browse the repository at this point in the history
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
  • Loading branch information
rshest authored and facebook-github-bot committed May 5, 2024
1 parent e93ef88 commit 69af5b6
Showing 1 changed file with 40 additions and 6 deletions.
46 changes: 40 additions & 6 deletions packages/rn-tester/js/examples/Image/ImageExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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',
},
Expand Down

0 comments on commit 69af5b6

Please sign in to comment.