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.

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

Closed
cbrevik opened this issue Dec 13, 2015 · 4 comments
Closed

[Android] Issue using resizeMode style on <Image />, RN 0.16 #4759

cbrevik opened this issue Dec 13, 2015 · 4 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@cbrevik
Copy link
Contributor

cbrevik commented Dec 13, 2015

I keep getting two similar warnings on Android;

Warning: Failed propType: Invariant Violation: Invalid props.style key `resizeMode` supplied to `View`.
Bad object: {
  "width": 300,
  "height": 220,
  "overflow": "hidden",
  "resizeMode": "stretch",
  "justifyContent": "space-around"
}
Valid keys: [
 ...
] Check the render method of `Image`.

And almost the same message, but with supplied to RCTView instead of View, and Check the render method of View instead of Image.

The only thing in my app I can see this corresponding to is the following;

<Image style={styles.card} source={card_images[this.state.cardImgIndex]} >
    <Text>
        {this.props.question}
    </Text>
</Image>

with this style;

card: {
    width: 300,
    height: 220,
    resizeMode: 'stretch',
    justifyContent: 'space-around'
}

The style not being applied correctly on Android, the image is not displayed as it should. This works fine on iOS.

@facebook-github-bot
Copy link
Contributor

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.

  • If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
  • If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
  • We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

@ms88privat
Copy link

@cbrevik did you try to set the resizeMode directly on the Image? <Image resizeMode="cover" .../>

@cbrevik
Copy link
Contributor Author

cbrevik commented Dec 13, 2015

@ms88privat that works, thanks! Still, it should be possible to apply it through styles, shouldn't it?

@ide
Copy link
Contributor

ide commented Dec 13, 2015

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.

@ide ide closed this as completed Dec 13, 2015
ghost pushed a commit that referenced this issue Jun 27, 2016
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
bubblesunyum pushed a commit to iodine/react-native that referenced this issue Aug 23, 2016
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
mpretty-cyro pushed a commit to HomePass/react-native that referenced this issue Aug 25, 2016
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
@facebook facebook locked as resolved and limited conversation to collaborators Jul 20, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 20, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

6 participants