Troubleshooting Low Quality Large Images in React Native 0.57.x

React Native 0.57.x <Image/>: Troubleshooting Low-Quality Large Images

Are you facing issues with low-quality large images when using React Native 0.57.x? Specifically, are you encountering this problem only on Android devices and simulators? You’re not alone. Many developers have reported the same issue, which seems to occur after upgrading to React Native 0.57.x.

The Problem:

When loading large bundled images on Android devices and emulators, the image quality appears significantly degraded, even when using the resizeMethod="resize" prop. This issue is not observed on any iOS simulator or device. Take a look at the screenshots below for comparison.

Both projects, “RN057ImageTest” and “RN056ImageTest,” were freshly installed using react-native init command. The code used to display the image is <Image source={require('./assets/ELHall1.png')} resizeMethod="resize" />, and the image file size is 2111 x 4645 pixels.

Possible Solutions:

Upgrading to React Native 0.57.x seems to have affected how the bundler handles image assets. While using the resizeMethod prop with values “scale” or “resize” doesn’t make any difference, tweaking the image format (PNG8, PNG24, PNG32) doesn’t yield any improvements either.

One potential workaround that has shown promising results is using the FastImage library instead of the built-in Image component. It offers better image quality and maintains its fidelity even with large images. Here’s an example:

import FastImage from 'react-native-fast-image';

// Inside your component
<FastImage source={require('./assets/ELHall1.png')} style={{ height: '100%', aspectRatio: 2.5 }} />

Before considering this alternative, make sure to install the react-native-fast-image library.

Update 1:

A GitHub issue was opened on the React Native repository regarding this issue back in September, but unfortunately, no response has been received so far. Thus, it’s important to acknowledge the possibility that this might not be an issue with React Native itself, but rather with the underlying image processing library being used. In this case, it seems that the problem lies with Fresco.

Update 2:

After further investigation, it has been found that the issue is related to Fresco, and not React Native directly. A workaround has been suggested by @clytras, involving the modification of the Fresco library source code by removing or commenting out the downsample code inside the DecodeProducer.java file.

To implement this workaround, you’ll need to clone the Fresco repository, apply the necessary changes to the source code, and compile Fresco from source. Detailed instructions and the required code modifications can be found in the GitHub repository provided by @clytras: https://github.com/clytras/RN061FrescoBuild.

Update 3:

If compiling Fresco from source seems too cumbersome, another option is to use the @lytrax/react-native-fresco template provided by @clytras. This template sets up a new React Native project with RN 0.61.5 and includes all the necessary modifications to build Fresco from source. It also utilizes Android NDK Revision 21. You can find more details about this template and installation instructions in the GitHub repository here: https://github.com/clytras/react-native-fresco.

Conclusion:

While React Native provides great functionality for developing cross-platform mobile applications, it’s essential to be aware of potential issues that may arise after upgrading to a newer version. In the case of React Native 0.57.x, the Image component may exhibit reduced image quality for large images on Android devices. Fortunately, alternative libraries like FastImage and modifications to the Fresco library can offer workarounds to overcome this problem.

Remember, always stay up-to-date on the latest developments and be proactive in finding solutions to ensure the best possible user experience for your React Native applications.

reference : 

reactjs