Possible to retain the quality of the image when zooming?

[codeplaygoa]

I have image with small text in it. The image itself is hd so normally on zooming the text can be readable. But with react-native-image-zoom the image is scaled from the mentioned dimension of the Image component. Is it possible to zoom first to the maximum size of the original image and then starts scaling? Here you can see the text is getting blurred as you zoom https://snack.expo.io/rylljGstV

[augustofontes]

+1

[asasouza]

+1

[VadimCpp]

+1

[LeoUrushi]

+1 I have the same problem.

[harry-harish]

@ascoders same issue. +1

[philyboysmith]

+1

[LeoUrushi]

It looks like iOS version does decent job in retaining image quality. But on Android, it gets very blurry.

[sajjadintel]

+1

[torchsmith]

+1

[johnlim5847]

is there a fix for this issue? or you guys found another image zoom library?

[deprolou]

Facing the same exact issue, we cant figure out how to apply a workaround for this.

[johnlim5847]

@ArtemKolichenkov Thanks for your hard work on the latest release! May I know will this issue be fixed in the upcoming release?

[ArtemKolichenkov]

@johnlim5847 I will work on this issue today. Hopefully will find the solution quickly 😅

[ArtemKolichenkov]

So I'm just gonna dump my findings here:

• This is likely related mostly to .png images.
• It was already like this couple of years ago in RN 0.57 (https://github.com/facebook/react-native/issues/21301)
• This issues goes deeper into RN dependency Fresco (https://github.com/facebook/fresco/issues/2397). There is some PR there but idk if/when its gonna be merged/tested.
• maybe https://github.com/DylanVann/react-native-fast-image can solve the issue. We might try using that, although I need to check if that would be backwards-compatible and if it will actually solve the issue. They started supporting bundled assets so there shouldn't be any drawbacks from using them, although I need to check. (This seems like breaking change though the more I think about so eh.... idk).
• here's StackOverflow question about this issue.

[queizy-sartori]

After being stuck with this problem for some time I ended up finding a workaround that solved the quality problem for Android in my case. My solution was to get the current scale from the react-native-image-zoom through the onMove({scale}) method and multiply the height and width values ​​of my image. Here's an example:

<ImageZoom 
        enableDoubleClickZoom={false}           
        onMove={this.onMoveZoom}
        cropWidth={cropWidth}
        cropHeight={cropHeight}
         imageWidth={cropWidth * this.state.currentScale}
         imageHeight={cropHeight * this.state.currentScale}>
            <Image 
               style={{
                  width: cropWidth * this.state.currentScale, 
                  height: cropHeight * this.state.currentScale, 
               }}
               source={{uri: YOUR_URI}} 
               resizeMode="contain"/>
</ImageZoom>

I hope this helps.

[mohamedosamakj]

check out this zoomable image component on stackoverflow could be helpful https://stackoverflow.com/a/37449923/11838322

[evanjmg]

Still no solution in 2021 with latest and increasing size does not work, nor does FastImage