Low image quality using <Image/> component on RN > = 0.57 (Fresco >= 1.10.0)

Description

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

There is low quality when loading large bundled (PNG, GIF and maybe more formats, NOT JPEG) images only on Android:

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. This continues to happen from 0.56 and all versions after and latest RN 0.60.x.

This is confirmed to be caused by RN Fresco lib change between 0.56 and 0.57 from 1.9.0 to 1.10.0 https://github.com/facebook/react-native/commit/b6f2aad9c0119d11e52978ff3fa9c6f269f04a14. Check comment https://github.com/facebook/react-native/issues/21301#issuecomment-520155609.

After some search at Fresco issues, I can see some related issues that it’s suggested that large images should be divided and recomposed piece by piece, which it resolves many cases (most map related large images) but it can be very inconvenient especially for dynamic loaded/created images. This was working until RN 0.56 and from 0.57 and after it does not.

Reproduction

RN: It’s the initial App.js with an <Image/> component added.

...
type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Image source={require('./assets/ELHall1.png')} resizeMethod="resize" />
      </View>
    );
  }
}
...

Additional Information

At this comment https://github.com/facebook/react-native/issues/21301#issuecomment-520418832, lambdapioneer writes that this maybe is related to scale down (sub-sampling) large images:

I assume it’s related to how Fresco scales downs (sub-sampling) large images (which is an important feature for memory and performance concerns). There has been some changes in these area during that time mainly for removing native code dependencies to help reducing the also pressing .so unsatisfied link errors. So to say: it might be a side-effect of another large improvement.

• Fresco version: >= 1.10.0
• Platform version: RN >= 0.57, all Android versions

[clytras]

@CaptainN it’s not rude. The thing is that I have done it and faced out all the errors, so it will take much less time for me to make a starter repo with instructions on how to install and patch Fresco.

So here it is: https://github.com/clytras/RN061FrescoBuild

It has RN 0.61.5. The repo has detailed instructions. It clones Fresco, checkouts v2.1.0 and applies a patch to DecodeProducer.java so to comment out the downsample code. You only have to download the Android NDK and add a libraries/fresco/local.properties file. It’s all detailed in the readme.

You can add fresco lib to an existing RN >= 0.60 (or older versions) project if you follow the instructions and the yarn scripts.

[stale[bot]]

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 “bug” or “enhancement” and I will leave it open. Thank you for your contributions.