Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Factor hardcoded image paths out in RNTester/Image example, get rid of .ico file #44415

Closed
wants to merge 2 commits into from
Closed

Factor hardcoded image paths out in RNTester/Image example, get rid of .ico file #44415

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f1e0e1
[skip ci] Add "Refresh Image" to RNTester Image.fadeDuration example …
rshest May 5, 2024
215054c
Factor hardcoded image paths out in RNTester/Image example, get rid o…
rshest May 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 61 additions & 32 deletions packages/rn-tester/js/examples/Image/ImageExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<{|
Expand Down Expand Up @@ -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 => {
Expand All @@ -175,7 +179,7 @@ class NetworkImageCallbackExample extends React.Component<
},
error => {
this._loadEventFired(
`✘ Prefetch failed (+${Date.now() - mountTime}ms)`,
`✘ prefetch failed (+${Date.now() - mountTime}ms)`,
);
},
);
Expand Down Expand Up @@ -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,
},
Expand Down Expand Up @@ -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 (
Expand All @@ -429,6 +433,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: `${IMAGE2}?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 @@ -497,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,
},
Expand Down Expand Up @@ -559,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({
Expand Down Expand Up @@ -795,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}
/>
);
Expand All @@ -808,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]} />;
},
},
{
Expand Down Expand Up @@ -852,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}}
/>
Expand All @@ -865,7 +899,7 @@ exports.examples = [
return (
<NetworkImageExample
source={{
uri: 'https://www.facebook.com/favicon_TYPO.ico',
uri: IMAGE1 + '_TYPO',
}}
/>
);
Expand All @@ -877,7 +911,7 @@ exports.examples = [
return (
<NetworkImageExample
source={{
uri: 'https://www.facebook.com/favicon.ico?r=1',
uri: `${IMAGE1}?r=1`,
}}
/>
);
Expand Down Expand Up @@ -1448,12 +1482,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
Loading