Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Image decoding limit workaround for RN (Android)
export default class CroppedImage extends Component {
state = {
croppedImageSources: []
};
async componentDidMount() {
const crops = 4;
const croppedImageHeight = imHeight / crops;
const croppedImageSources = [];
for (let i = 0; i <= crops; i++) {
const cropData = {
offset: { x: 0, y: croppedImageHeight * i },
size: { width: imgWidth, height: croppedImageHeight }
};
const croppedImageSource = await asyncCropImage(
this.props.url,
cropData
);
croppedImageSources.push(croppedImageSource);
}
this.setState({ croppedImageSources });
}
render() {
return this.state.croppedImageSources.map(source => (
<Image style={styles.image} source={source} />
));
}
}
const styles = StyleSheet.create({
image: {
width: width,
height: croppedImageHeight
}
});
const asyncCropImage = async (source: string, cropData: any) =>
new Promise((resolve, reject) => {
const onSuccess = imageUri => resolve(imageUri);
const onFailure = err => {
return reject(new Error(err));
};
ImageEditor.cropImage(source, cropData, onSuccess, onFailure);
});
@mmazzarolo

This comment has been minimized.

Copy link
Owner Author

mmazzarolo commented Dec 1, 2018

The solution above is a simple workaround for fixing the Android image decoding issue.
I collected a few interesting resources about it, but the TLDR is: Android is not able to load correctly images with a really high resolution (e.g.: 800 * 20000) and shows them as blurry/pixelated.

Useful resources:

@mmazzarolo

This comment has been minimized.

Copy link
Owner Author

mmazzarolo commented Dec 1, 2018

From my testing both Image (Fresco) and FastImage (Glide) have this issue.
If the image is a JPEG you might be able to fix it using resizeMethod="resize".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.