Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue


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 Check comment

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.


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" />

Additional Information

At this comment, 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

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:21
  • Comments:61 (5 by maintainers)

github_iconTop GitHub Comments

clytrascommented, Jan 17, 2020

@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:

It has RN 0.61.5. The repo has detailed instructions. It clones Fresco, checkouts v2.1.0 and applies a patch to so to comment out the downsample code. You only have to download the Android NDK and add a libraries/fresco/ 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]commented, Sep 14, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Low image quality using <Image/> component on RN > = 0.57 ...
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].
Read more >
React Native 0.57.x <Image/> large images low quality
I have created a react-native-community/cli template that has RN 0.61. 5 project and the required modifications to build Fresco from source.
Read more >
Image - React Native Archive
A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, ...
Read more >
the class imagesingletons can only be used when building ...
Error building native image with gluonfx-maven-plugin 1.0.14 ... image quality using <Image/> component on RN > = 0.57 (Fresco >= 1.10.0)#2397.
Read more >
react-native-fast-image - npm
FastImage, performant React Native image component.. Latest version: 8.6.3, last published: a month ago. Start using react-native-fast-image ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found