[RFC] New dependency: `react-native-image-picker`

Status

Adopted

New Dependency

Name: react-native-image-picker URL: https://github.com/react-native-community/react-native-image-picker

Focus

A React Native module that allows you to use native UI to select a photo/video from the device library or directly from the camera.

Check out the example code and a test out PR here.

Check List

• Have read over the source code, and we can maintain it
• Has had a release in the last year, or looks done and stable

Alternatives

react-native-image-picker seems to be the standard. There’s also react-native-cameraroll, which we already have in the app, but it is extremely low level and doesn’t give us all of the nice native bits.

[damassi]

Thanks for the thorough response @ashfurrow 👍

I agree re react-native-image-crop-picker; I’ll spin up and example PR later this week and give it a spin and report back here.

[ashfurrow]

Okay, let’s circle back to this.

I’ve reviewed the new designs around image picking for consignment submissions and I have some thoughts. The downside of the designs is that users need to choose between choosing an existing image or taking a new one (whereas our current implementation lets users do either/both without choosing upfront).

This is actually a limitation of the iOS native image picker API, but as a consequence, this means that most users are familiar with with this UX. So I’m okay with this tradeoff of using the native image picker.

That’s the UX downside, but there are upsides too. First, our image picker only shows the album of all images, sorted by their date taken. This new design would let users select from user-created albums, or auto-generated albums like the user’s favourites. That’s cool! And I think serves a real-world use case.

So let’s move forward with the discussion assuming the designs are what we want to implement; let’s evaluate this RFC based on how it helps us achieve our UX goals. The existing image-picking code for the consignments flow is… it’s pretty bad 😅 To implement the new designs, we would basically need to throw it all away and start over. The code we would write (to access the iOS image library) wouldn’t be unique or differentiating to our app, which makes it a good candidate for an OSS dependency. Using a dependency would also provide an abstraction over iOS/Android, so we have less work to do going forward. So from both a UX and a codebase health perspective, I’m a 👍 on using a dependency.

However… react-native-image-picker does not support the design UX, which has multiple image selection. I think we should go with Mounir’s suggestion and use react-native-image-crop-picker. It provides a UI similar to the native experience, but better. The react-native-image-picker README even calls this out:

This library started as a basic bridge of the native iOS image picker, and I want to keep it that way. As such, functionality beyond what the native UIImagePickerController supports will not be supported here. Multiple image selection, more control over the crop tool, and landscape support are things missing from the native iOS functionality - not issues with my library. If you need these things, react-native-image-crop-picker might be a better choice for you.

Using react-native-image-crop-picker gets us a UX that the user is familiar with, but is improved in a way that I think suits our designed UX. I’ve looked over the Objective-C code and it’s all pretty standard, and the React API seems straightforward.