Custom UI view for cropping image after using Camera?

Hi, I am using the ImagePicker API and it is working perfectly. However, since the cropping on iOS devices is always a square, I am wondering if there is a way to create a customized UI? Since all the code is inside the ImagePicker, I don’t seem to find a way to do that. I am thinking using Camera API instead and create the UI myself. Eventually what I want to do is, after an image is taken/selected, the user can crop the image by editing a rectangle-like view above the image, and I can use the ImageManipulator API to crop the image. Any ideas how to achieve this? Or is there a better way? Thank you very much!!

Seems like this would be possible. I don’t think you need to involve the Camera API. Don’t set allowsEditing to true in the ImagePicker, so it skips the default image cropper UI altogether. Throw the image on screen, track pinch/ expand gestures to move a “crop rectangle” around, and then run the image through ImageManipulator with a crop operation corresponding to how the user moved the rectangle around. I haven’t tried it myself, but I imagine the GestureHandler (GestureHandler - Expo Documentation) could help out with the needed gestures.

Thank you for your response!! My question is, even if I set the allowEditing to be false, what’s gone is the cropper UI, but the image will still be automatically displayed on the screen, with a cancel button on the bottom left. and use photo on the bottom right. How can I bypass this as well?

Ah, yeah, that will always be there with ImagePicker as far as I know. So, you could use the Camera library to skip that entirely, or you could see it as a confirmation that the original photo is OK before you jump into editing mode. Or maybe you do both- start with ImagePicker so you can focus on the editing UI, and then take things up a notch by adding your own custom camera UI.

1 Like

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.