Cancelling/Exiting Photo Library in Android using react-native-image-crop-picker

Question

In my React Native app, I use the react-native-image-crop-picker package to have access to user's photo library.

It works nicely but if the user has no images in his/her photo library, I want to give the user a way to cancel out or exit it. How do I do that? Currently in Android, I click the element e.g. button or menu item to access user's photo library but then I get stuck there -- see image below:

And if I use gestures to get back to my app, I get the following warning.

Possible Unhandled Promise Rejection

My code is pretty basic at this point. When the user presses a button, I call this function which invokes the image picker:

pickImage() {

  ImagePicker.openPicker({
     width: 400,
     height: 250,
     cropping: true
  }).then(image => {
     onFilePicked(image);
  });

}

Basically, I just need to give the user a way to cancel out of picking an image from the photo gallery. I'd appreciate some pointers on this. Thanks!

score 2 · Answer 1 · answered Feb 10 '22 at 17:33

The npm package react-native-image-crop-picker is the most used library in react-native to choose Images and videos across the platforms.

It opens a default native Intent from which we can select media files from the gallery, We are not able to customize the view of it as its pure native intent is available into the native device.

And the error message Possible Unhandled Promise Rejection We get is the default error from the library, when the user goes back into our app without selecting a single image or video.

To handle the error message we have to wrap our code inside to try and catch it.

For Ex:

ImagePicker.openPicker({
     width: 400,
     height: 250,
     cropping: true
  }).then(image => {
     onFilePicked(image);
  }).catch(err => {
     console.log('Error : ', err.message)
  });

// - OR -

try {
    const imagePickerRes = await ImagePicker.openPicker({
        width: 400,
        height: 250,
        cropping: true
    })
    console.log('imagePicker Result : ', imagePickerRes)
} catch (err) {
    console.log('Error : ', err.message)
}

Cancelling/Exiting Photo Library in Android using react-native-image-crop-picker

1 Answers1