-
Notifications
You must be signed in to change notification settings - Fork 24.4k
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.
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
[Android] Issue using resizeMode style on <Image />, RN 0.16 #4759
Comments
Hey cbrevik, thanks for reporting this issue! React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.
|
@cbrevik did you try to set the resizeMode directly on the Image? |
@ms88privat that works, thanks! Still, it should be possible to apply it through styles, shouldn't it? |
resizeMode is not a style: https://facebook.github.io/react-native/docs/image.html#props. The fact this works on iOS is because it's lenient but is unsupported behavior. |
Summary: Hi there, Here is a fix for #7538 (and #5085). I had originally discovered this issue when using `resizeMode` through the style props. Although this might arguably be an incorrect usage (see #4759 (comment)) the same issue would happen with the `tintColor` and `overlayColor` style props. To test this, you can render the following: ```jsx const imageContainerStyle = {width: 100, height: 100, backgroundColor: 'green', marginLeft: 10, marginTop: 10, }; const imageStyle = {flex: 1, width: undefined, height: undefined, resizeMode: 'contain', }; return ( <View style={styles.container}> <View style={imageContainerStyle}> <Image style={imageStyle} source={ {uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'} }> </Image> </View> <View style={imageContainerStyle}> <Image style={imageStyle} source={ { Closes #8410 Differential Revision: D3488010 Pulled By: andreicoman11 fbshipit-source-id: e9d1283cce8426c8878f9c3c66a43a2141232277
Summary: Hi there, Here is a fix for facebook#7538 (and facebook#5085). I had originally discovered this issue when using `resizeMode` through the style props. Although this might arguably be an incorrect usage (see facebook#4759 (comment)) the same issue would happen with the `tintColor` and `overlayColor` style props. To test this, you can render the following: ```jsx const imageContainerStyle = {width: 100, height: 100, backgroundColor: 'green', marginLeft: 10, marginTop: 10, }; const imageStyle = {flex: 1, width: undefined, height: undefined, resizeMode: 'contain', }; return ( <View style={styles.container}> <View style={imageContainerStyle}> <Image style={imageStyle} source={ {uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'} }> </Image> </View> <View style={imageContainerStyle}> <Image style={imageStyle} source={ { Closes facebook#8410 Differential Revision: D3488010 Pulled By: andreicoman11 fbshipit-source-id: e9d1283cce8426c8878f9c3c66a43a2141232277
Summary: Hi there, Here is a fix for facebook#7538 (and facebook#5085). I had originally discovered this issue when using `resizeMode` through the style props. Although this might arguably be an incorrect usage (see facebook#4759 (comment)) the same issue would happen with the `tintColor` and `overlayColor` style props. To test this, you can render the following: ```jsx const imageContainerStyle = {width: 100, height: 100, backgroundColor: 'green', marginLeft: 10, marginTop: 10, }; const imageStyle = {flex: 1, width: undefined, height: undefined, resizeMode: 'contain', }; return ( <View style={styles.container}> <View style={imageContainerStyle}> <Image style={imageStyle} source={ {uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'} }> </Image> </View> <View style={imageContainerStyle}> <Image style={imageStyle} source={ { Closes facebook#8410 Differential Revision: D3488010 Pulled By: andreicoman11 fbshipit-source-id: e9d1283cce8426c8878f9c3c66a43a2141232277
I keep getting two similar warnings on Android;
And almost the same message, but with
supplied to RCTView
instead ofView
, andCheck the render method of View
instead ofImage
.The only thing in my app I can see this corresponding to is the following;
with this style;
The style not being applied correctly on Android, the image is not displayed as it should. This works fine on iOS.
The text was updated successfully, but these errors were encountered: