CODEWITHSUNDEEP
iosimagereact-nativereact-native-image-picker
priteshbaviskar
priteshbaviskar

Reputation: 2327

Cropping multiple images in react native

What would be the right approach to crop several images at ones in React Native? I'm working on an app where user selects many photos but before uploading them to the server, each photo should have the right aspect ratio - 1:1, 2:3, etc.

I'm using react-native-image-crop-picker to allow user to select multiple photos at ones. Initially I used to same library to allow users to crop one photo at a time but it was a bad user experience as people upload 10-20 photos at a time. So I thought of auto-cropping images behind the scene using ImageEditor.cropImage()

Now I get the cropped image but it almost freezes the app until the images are cropped, leading to bad ux. Any leads on how this should be tackled?

Upvotes: 1

Views: 1276

Answers (1)

Gabcvit
Gabcvit

Reputation: 1488

In my opinion this seems like a very difficult scope to cover only by using the react-native-image-picker library. I would rethink this lack of flexibility on the server side when receiving images too. Basically I think it's just not a good UX demanding the user to upload multiple images with a restricted aspect ratio on a mobile device.

But if that's not possible you could try to solving this problem with the following options for better UX:

  • Option 1: Once importing the images, show them in a grid view in your app, allowing the user to crop every single one of them before uploading (this way the user can do it manually without feeling too overwhelmed, a slightly better approach to the manual cropping)
  • Option 2: Try to run the automatic cropping images sequentially (not asynchronous), and show the user an ActivityIndicator while the app is busy processing those images and uploading them (lock the app's navigation if you need to, it's understandable from the user's side that uploading multiple images is a slower process).
  • Option 3: Move the automatic cropping functionality to the server side if possible, this way the app is not overwhelmed with the processing of the images, and the Backend will have more liability by treating all the images that it receives. Not sure if that could be implemented though.

Upvotes: 1

Related Questions