Skip to content

Commit

Permalink
Add example of different resize methods (#46873)
Browse files Browse the repository at this point in the history
Summary:
Pull Request resolved: #46873

## Summary

Adds a small showcase for the different `resizeMethod` options and how downsampling is applied

## Changelog

[Android][Added] - Added showcase for Android `resizeMethod` options when applied to a large image

Reviewed By: rshest

Differential Revision: D62393212

fbshipit-source-id: 46e7ff6310617acb9eb288e3831c0b5e6b1751c8
  • Loading branch information
Abbondanzo authored and facebook-github-bot committed Oct 8, 2024
1 parent 52f8c57 commit 768a1d8
Show file tree
Hide file tree
Showing 5 changed files with 34 additions and 0 deletions.
Binary file added packages/rn-tester/js/assets/large-image-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/rn-tester/js/assets/large-image-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/rn-tester/js/assets/large-image-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/rn-tester/js/assets/large-image-4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 34 additions & 0 deletions packages/rn-tester/js/examples/Image/ImageExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -853,6 +853,10 @@ const styles = StyleSheet.create({
height: 64,
width: 64,
},
resizedImage: {
height: 100,
width: '500%',
},
});

exports.displayName = (undefined: ?string);
Expand Down Expand Up @@ -1608,4 +1612,34 @@ exports.examples = [
},
platform: 'android',
},
{
title: 'Large image with different resize methods',
description:
'Demonstrating the effects of loading a large image with different resize methods',
render: function (): React.Node {
const methods = ['auto', 'resize', 'scale', 'none'];
// Four copies of the same image so we don't serve cached copies of the same image
const images = [
require('../../assets/large-image-1.png'),
require('../../assets/large-image-2.png'),
require('../../assets/large-image-3.png'),
require('../../assets/large-image-4.png'),
];
return (
<View>
{methods.map((method, index) => (
<View key={method} style={{display: 'flex', overflow: 'hidden'}}>
<Text>{method}</Text>
<Image
resizeMethod={method}
source={images[index]}
style={styles.resizedImage}
/>
</View>
))}
</View>
);
},
platform: 'android',
},
];

0 comments on commit 768a1d8

Please sign in to comment.