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?

Belting

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.

Euhemerism

I already try this three options, I always got my picture without crop. I followed this on StackOverflow link – Belting

Answer 2

you can use package for cropping the image. first package for uploading image and second for cropping the image.

1. react-native-image-picker
2. react-native-image-crop-picker

for uploading image you can use first package function like this

  const pickImage = () => {
    launchImageLibrary({quality: 0.5}, response => {
      if (!response.didCancel) {
        setUri(response.assets[0]);
        setCropImg('');
      }
    });
  };

for cropping the image you can use second package function like this

  const Crop_img = () => {
ImagePicker.openCropper({
  path: uri.uri,
  width: dimensions.width - 30,
  height: dimensions.height / 3.5,
  maxFiles: 1,
  showCropFrame: false,
}).then(image => {
  console.log(image.path);
  setCropImg(image.path);
});
  };

Abscissa