Repository navigation
Image resizeModes contain & center render incorrectly on Android #17684
Description
Activity
import ImageResizer from "react-native-image-resizer";
// first upload image with resizing using below block of code
if (image_uri) {
ImageResizer.createResizedImage(image_uri, 800, 600, "JPEG", 100)
.then(resizedImage => {
this.setState({
image: resizedImage.uri
});
})
.catch(err => {
console.log(err);
});
}// show image after resize
<Image
style={{
// marginTop: 20,
width: Metrics.image.tiny,
height: Metrics.image.tiny
}}
source={Images.next}
resizeMode="contain"
/>@RidaRidss that looks like a reasonable workaround for these
resizeModeissues; there's alsoImageManipulatorfor Expo users. However, this issue is about the behaviour of<Image>itself.After a bit of digging, this is likely due to the Fresco/Android caveat discussed in facebook/fresco#153 and http://frescolib.org/docs/rounded-corners-and-circles.html#caveats.
I get sample error, because I forgot style Image with
width and height{image && ( <Image source={image} style={{ width: 188, height: 188, position: 'absolute', resizeMode: 'contain', }} /> )}
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.
- locked as resolved and limited conversation to collaborators
on Nov 24, 2018 - added a commit that references this issue
on Nov 5, 2021
Is this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
I don't have the CLI set up, or rather, I don't know how to invoke it from a local Git copy of
react-native. For the sake of complying with the issue template, my environment is:Environment:
OS: macOS High Sierra 10.13.2
Node: 8.9.3
Yarn: 1.3.2
npm: 5.5.1
Watchman: 4.7.0
Xcode: Xcode 9.0.1 Build version 9A1004
Android Studio: 3.0.1 AI-171.4443003
Packages:
react-nativeat latestmaster(431670f)react: 16.2.0 => 16.2.0Target Platform: Android (I am running 7.0 on Genymotion)
Steps to Reproduce
<Image>page on both and scroll down to the "Resize Mode" section.containimages on both, for the case where the image is larger than its view.center(which is an Android-only value ofresizeMode)Expected Behavior
resizeMode="contain"The image should be scaled down to fit the view in a "letterboxed" manner, leaving empty space at the top and bottom in this case. See documentation:
And see correct behaviour on iOS:
resizeMode="center"(See also: #17759)
No corresponding iOS screenshot, and the documentation currently omits this value. However, it's clear from the actual behaviour (see below) that there is a bug, similar to the
containcase.Actual Behavior
On Android, for both
resizeMode="contain"andresizeMode="center", the shrunk image (bottom set of examples, blue background) seems to be drawn on top of an incorrectly scaled or unscaled copy of itself:Reproducible Demo
Reproducible in RNTester as-is. I can also put together a Snack if that helps.