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.

Sign up for GitHub

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

Jump to bottom

Incorrect resizeMode applied on Android when children are present #7538

Closed
jeanregisser opened this issue May 12, 2016 · 2 comments
Closed

Incorrect resizeMode applied on Android when children are present #7538

jeanregisser opened this issue May 12, 2016 · 2 comments
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@jeanregisser
Copy link
Contributor

screen shot 2016-05-12 at 19 28 18

The layout of the second Image with the blue square on Android is incorrect and should be as it is on iOS on the right.

Example code to reproduce the issue:

<View style={styles.container}>
  <View style={{width: 100, height: 100, backgroundColor: 'green', marginLeft: 10, marginTop: 10, }}>
    <Image style={{flex: 1, width: undefined, height: undefined, resizeMode: 'contain'}} source={
      {uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'} 
    }>
    </Image>
  </View>
  <View style={{width: 100, height: 100, backgroundColor: 'green', marginLeft: 10, marginTop: 10, }}>
    <Image style={{flex: 1, width: undefined, height: undefined, resizeMode: 'contain'}} source={
      {uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}  
    }>
      <View style={{width: 20, height: 20, backgroundColor: 'blue'}} />
    </Image>
  </View>
</View>

https://rnplay.org/apps/QCCuUw

Tested on RNPlay with RN 0.24.1 and locally with RN 0.26.0-rc.
Problem is present on both versions.
@DanielMSchmidt
Copy link
Contributor

@facebook-github-bot label Android

@ghost ghost added Android Ran Commands One of our bots successfully processed a command. labels May 15, 2016
jeanregisser added a commit to jeanregisser/react-native that referenced this issue Jun 24, 2016
@jeanregisser
Fixed incorrect style props passed to Android Image when using childr…
3f11bb6 
…en, facebook#5085, facebook#7538
@jeanregisser jeanregisser mentioned this issue Jun 24, 2016
Closed
jeanregisser added a commit to jeanregisser/react-native that referenced this issue Jun 27, 2016
@jeanregisser
Fixed incorrect style props passed to Android Image when using childr…
e935258 
…en, facebook#5085, facebook#7538
ghost pushed a commit that referenced this issue Jun 27, 2016
@jeanregisser
Fixed incorrect style props passed to Android Image when using children
7f9ec4e 
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
@jeanregisser
Copy link
Contributor Author

Closing since #8410 has been merged.

samerce pushed a commit to iodine/react-native that referenced this issue Aug 23, 2016
@jeanregisser @samerce
Fixed incorrect style props passed to Android Image when using children
6d21f06 
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
@jeanregisser
Fixed incorrect style props passed to Android Image when using children
bb89638 
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 Jun 28, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 19, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jeanregisser @DanielMSchmidt @react-native-bot