Image isn't keeping its aspect ratio

[juangl]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
      Memory: 184.93 MB / 8.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.10.0 - ~/.nvm/versions/node/v10.10.0/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v10.10.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0
      react-native: 0.57.2 => 0.57.2
    npmGlobalPackages:
      react-native-cli: 2.0.1

Description

There's an issue particularly with this image that is losing its aspect ratio regardless any resizeMode. This is happening on iOS only AFAIS. I'd be happy if anyone could point me out whether I'm doing something wrong or some piece of code that could be the culprit. 😁

Original image: https://s3-us-west-2.amazonaws.com/assets.development.october.news/cards/originals/9d53db66-5485-4aa1-bddc-16103e86c870.jpg

Reproducible Demo

https://snack.expo.io/@juangl/thoughtful-pizza

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[stale]

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.

[michalchudziak]

Hello there 👋 by using the repro / the list of steps to reproduce, we can't actually see the reported bug on RN 0.59 so we'll close this issue. It may have something to do with your local setup, please double check that you are using the correct version of Android Studio / XCode / Android NDK / Yarn / etc.

[juangl]

Hey, @michalchudziak! Thanks for looking into it.

Just wanted check, since my coworkers have had the same issue, this is what I'm seeing in RN 0.59. I'm not sure what might be causing this from the tooling side.

Code:

import React, { Component } from "react";
import { Image, View, StyleSheet } from "react-native";

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Image
          style={styles.image}
          source={{
            uri:
              "https://s3-us-west-2.amazonaws.com/assets.development.october.news/cards/originals/9d53db66-5485-4aa1-bddc-16103e86c870.jpg",
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  image: {
    width: 300,
    height: 200,
  }
});