RN 0.57.x Bundled large images have low quality when viewing using <Image/> component with 1:1 AR on Android

• [✔] 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 High Sierra 10.13.6 CPU: x64 Intel® Core™ i7 CPU 920 @ 2.67GHz Memory: 111.21 MB / 12.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.9.0 - /usr/local/bin/node Yarn: 1.9.2 - /usr/local/bin/yarn npm: 6.2.0 - /usr/local/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: Android Studio: 3.1 AI-173.4907809 Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild npmPackages: react: 16.5.0 => 16.5.0 react-native: 0.57.1 => 0.57.1

Description

There is really low quality when loading large bundled images even when using resizeMethod="resize". This happens only on Android, not on any iOS simulator/device. Have tested it on Android 8.1 emulator and LG G6 with Android 8.0. Please see the screenshots bellow.

At the left screenshot we see the exact same code running with RN 0.56.0 and at the right screenshot we see RN 0.57.1. The code is just a simple image <Image source={require('./assets/ELHall1.png')} resizeMethod="resize" /> and the image size is 2111 x 4645 pixels. Both projects are fresh installed using react-native init RN057ImageTest and react-native init --version="0.56.0" RN056ImageTest

Reproducible Demo

It’s the initial App.js with the <Text/> components commented and an <Image/> component added.

...
type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        {/*<Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>*/}
        <Image source={require('./assets/ELHall1.png')} resizeMethod="resize" />
      </View>
    );
  }
}
...

[dulmandakh]

React Native use Fresco to render images on Android, and every props passed to Image component will be passed to Fresco. So it’s not really React Native issue. Anyone interested can work on Fresco to land the feature.

[hrachqyutukyan]

also in 0.59.3