diff --git a/packages/rn-tester/js/assets/large-image-1.png b/packages/rn-tester/js/assets/large-image-1.png new file mode 100644 index 00000000000000..e26692326b1107 Binary files /dev/null and b/packages/rn-tester/js/assets/large-image-1.png differ diff --git a/packages/rn-tester/js/assets/large-image-2.png b/packages/rn-tester/js/assets/large-image-2.png new file mode 100644 index 00000000000000..e26692326b1107 Binary files /dev/null and b/packages/rn-tester/js/assets/large-image-2.png differ diff --git a/packages/rn-tester/js/assets/large-image-3.png b/packages/rn-tester/js/assets/large-image-3.png new file mode 100644 index 00000000000000..e26692326b1107 Binary files /dev/null and b/packages/rn-tester/js/assets/large-image-3.png differ diff --git a/packages/rn-tester/js/assets/large-image-4.png b/packages/rn-tester/js/assets/large-image-4.png new file mode 100644 index 00000000000000..e26692326b1107 Binary files /dev/null and b/packages/rn-tester/js/assets/large-image-4.png differ diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js index 65c033135e8bb7..a8a355a70bd199 100644 --- a/packages/rn-tester/js/examples/Image/ImageExample.js +++ b/packages/rn-tester/js/examples/Image/ImageExample.js @@ -853,6 +853,10 @@ const styles = StyleSheet.create({ height: 64, width: 64, }, + resizedImage: { + height: 100, + width: '500%', + }, }); exports.displayName = (undefined: ?string); @@ -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 ( + + {methods.map((method, index) => ( + + {method} + + + ))} + + ); + }, + platform: 'android', + }, ];