Extremely pixelated image when zooming in with ScrollView

[CharlieOrlando]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Environment:
OS: macOS High Sierra 10.13.5
Node: 7.7.1
Yarn: 0.27.5
npm: 4.3.0
Watchman: 4.7.0
Xcode: Xcode 9.4 Build version 9F1027a
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4

Description

I have a large image (2338x2940) that is within a ScrollView. Resizing the image down, with contain, to the device size makes it fit, but when zooming with the ScrollView, the image is incredibly blurry. However, if I first render the image with full dimensions, using resizeMode="contain", then switch the resizeMode to 'cover' AND change the dimensions to the device size, everything works perfectly. The image fits and is perfect quality on zoom.

I'm not sure why this is happening, but it makes for an incredibly poor user experience. I'm currently using a hacky workaround with opacity to hide the image until it's loaded, but I'd really like to know if there's a better solution.

Here's two example images to demonstrate the issue...

Reproducible Demo

<Image source={{uri: this.props.imageSource}} resizeMode={this.state.isImageLoaded ? 'cover' : 'contain'} style={[styles.image, {width: this.state.imageWidth, height: this.state.imageHeight, opacity: this.state.isImageLoaded ? 1 : 0}]} onLoad={() => this.handleImageLoad()} />

[react-native-bot]

Have you been able to reproduce this on the latest release, 0.56?

[CharlieOrlando]

I haven't attempted that yet, but I guess it's worth a shot

[CharlieOrlando]

I should mention, however, that I did test it on different iPhones, and it works perfectly on iPhone 7/8 Plus and iPhone X. iPhone 7 and 8 have the issue. I haven't tried anything lower than that, as the app I'm developing isn't applicable for those

[CharlieOrlando]

Well, just updated to .56, and the app is pretty much unusable now. Fetching a blob takes forever and sends the CPU usage through the roof (100-300%), and the FileReader API also takes way longer than it used to.

Is there really no insight into the pixelated image issue?

edit... Forgot to mention that the pixelated image problem still existed in .56

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

[CharlieOrlando]

The issue still existed in the latest release