There is really low quality when loading large bundled images, even when using resizeMethod="resize"
. This happens only on Android, not on any iOS simulator/device. Have tested it on Android 8.1 emulator and LG G6 with Android 8.0. Please see the screenshots bellow.
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.5. 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
.
Simple App with an Image
...
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
{/*<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>*/}
<Image source={require('./assets/ELHall1.png')} resizeMethod="resize" />
</View>
);
}
}
...
I have created a Github issue to RN repo since September but noone has replied which makes me think that I am doing something wrong. Is there a new prop or an other way to make large images show normal with full quality in RN 0.57.x? Maybe the metr obuilder updates to 0.57.x have changed how the bundler handles the image assets? I have used resizeMethod
prop to "scale"
and "resize"
with no difference at all. I have used PNG8
, PNG24
and PNG32
all same result.
EDIT
The Github repo with the code and the PNG image files: https://github.com/clytras/RN057ImageTest
Please don't give any answers about JPEG images and that they do work, I already know that; I want to make PNG images work like they do in RN 0.56.