Crop image with react-native

Question

Hello World,

I trying to crop an image like explain on the React-native Doc

<Image source={{uri: this.props.image, crop: {left: 50, top: 50, width: 100, height: 100}}} style={{height: 100, width: 100}}/>

But it's doesn't work the image is not cropped.

Any idea?

Answer 1

From the docs:

On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.

React Native Image is not currently supporting image cropping, at least not the way you pointed, however you still have other options that will do the same job.

1. ImageEditor: React Native Component, again from the docs:

Crop the image specified by the URI param. If URI points to a remote image, it will be downloaded automatically. If the image cannot be loaded/downloaded, the failure callback will be called.

2. Cropping doesn't require linking.
3. Image Crop Picker another package that offers cropping, but in a different way: Picking. Requires linking, but thankfully it also supports RN versions > 0.40.

I haven't used any of them, but if I were you, I would first try Image Editor, since you don't need any additional installation except importing.