React Native 0.57.x <Image/> large images low quality

Most of the times it is the dimensions of the Image that matter, UI designers make Designs to standard high end Mobile phones(with fixed Screen Size) and export the Images as .png to xhdpi,xxhdpi and xxxhdpi resolutions. So developers rename those Images by appending @1x, @2x & @3x to those resolutions. Example: ELHall1@1x ,ELHall1@2x, ELHall1@3x.

When Importing Images use the standard name of the Image. Example: ELHall1.png.

To workaround <Image> tag I use the help of Dimension API in React-Native to auto set the width and height of the Image most of the time.

Example: var {height, width} = Dimensions.get('window');

For Example, if the Image has to cover the whole screen, I would do,

 <View style={{flex:1,width:"100%",height:"100%"}}>    <Image style={{width:width, height:height}} source={require('./assets/ELHall1.png')}  />     // width & height is auto taken using Dimension API    // To play around pixels use resizeMode= ("contain","center") (Keep this as last option)  </View>

I Hope I could help you.

I tested FastImage and it had a better quality

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

It is the way to apply @clytras' patch to an existing project.And it cannot run android simulator anymore. I am always testing on real devices. 😢

1. Add scripts to package.json

"fresco-clone": "git clone https://github.com/facebook/fresco.git android/libraries/fresco && cd android/libraries/fresco && git checkout tags/v2.1.0","fresco-patch": "yarn file-patch ./patches/DecodeProducer.java.diff android/libraries/fresco/imagepipeline/src/main/java/com/facebook/imagepipeline/producers/DecodeProducer.java","fresco-setup": "yarn fresco-clone && yarn fresco-patch"

2. Create patches/DecodeProducer.java.diff

'yarn fresco-patch'

Result

@@ -7279,32 +7279,35 @@+//  if (mDownsampleE@@ -7381,24 +7381,27 @@+//    ImageReque@@ -7460,24 +7460,27 @@+//    if (mDowns@@ -7513,24 +7513,27 @@+ //        %7C%7C !U@@ -7587,36 +7587,39 @@+//+  encodedImage.set@@ -7637,32 +7637,35 @@ %0A               + //          Downsam@@ -7700,32 +7700,35 @@ %0A               + //              req@@ -7762,32 +7762,35 @@+//              requ@@ -7820,32 +7820,35 @@ %0A               + //              enc@@ -7866,32 +7866,35 @@+//              maxB@@ -7914,32 +7914,35 @@+//    %7D%0A            @@ -7937,32 +7937,35 @@+//  %7D%0A%0A             @@ -7962,24 +7962,27 @@+ //  if (produce@@ -8002,28 +8002,31 @@+//+  .getImagePip@@ -8050,24 +8050,27 @@+ //      .getExp@@ -8091,24 +8091,27 @@+ //      .should@@ -8151,24 +8151,27 @@+//    maybeIncre@@ -8206,32 +8206,35 @@ %0A               + //  %7D%0A%0A            

3. Edit android/settings.gradle

Add includeBuild ('libraries/fresco') before include ':app'

rootProject.name = 'YOURPROJECT'...includeBuild ('libraries/fresco') include ':app'

4. android/build.gradle

Use gradle dependency is 3.4.1

dependencies {  ...  classpath("com.android.tools.build:gradle:3.4.1")  ...}

5. Run script

yarn fresco-setup

6. Download android ndk

I used r21 version.

https://developer.android.com/ndk/downloads

7. Unzip and move the ndk

Unzip NDK I unzipped ndk to Users/YOURNAME/Library/Android/android-ndk-r21And create android/libraries/fresco/local.properties in your project

ndk.dir=/Users/YOURNAME/Library/Android/android-ndk-r21org.gradle.daemon=trueorg.gradle.parallel=trueorg.gradle.configureondemand=true

8. Run android

That's all.

yarn android and check the large image quality.

Thanks to @clytras

https://github.com/clytras/react-native-fresco

Original my answer: https://github.com/facebook/fresco/issues/2397#issuecomment-626631033