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

Question

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

damassi opened this issue 4 years ago · comments

Christopher Pappas commented 4 years ago

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.

Mounir Dhahri · Answer 1 · Wed Jun 17 2020 17:32:41 GMT+0800 (China Standard Time)

I think we should also consider trying react-native-image-crop-picker since it supports multiple image selection and it's fairly stable and maintained as well. I switched to using it after using react-native-image-picker and never regretted it. About react-native-cameraroll, I agree with what you said.

David Sheldrick · Answer 2 · Wed Jun 17 2020 18:18:25 GMT+0800 (China Standard Time)

The existing picker we have in the current consignments flow provides a significantly better UX than either of these options IMO. Is there some functionality it's missing for the new flow?

Ash Furrow · Answer 3 · Wed Jun 17 2020 21:18:08 GMT+0800 (China Standard Time)

Yeah, I'd like to hear more about the specifics UX that's motivating the RFC. Maybe some mocks of what this will look like to users, in contrast to what we already have?

Christopher Pappas · Answer 4 · Thu Jun 18 2020 00:19:49 GMT+0800 (China Standard Time)

We'd like to go with native UI versus custom UI. See this slack convo: https://artsy.slack.com/archives/CS3H1K4BD/p1592408181166200

Christopher Pappas · Answer 5 · Thu Jun 18 2020 00:22:29 GMT+0800 (China Standard Time)

@MounirDhahri - I did see that come up! The name seemed a bit misleading, but now that I'm thinking about it this could be beneficial for users when they take photo. Will dig in.

Ash Furrow · Answer 6 · Tue Jul 21 2020 04:15:00 GMT+0800 (China Standard Time)

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.

Christopher Pappas · Answer 7 · Tue Jul 21 2020 05:22:12 GMT+0800 (China Standard Time)

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.

Christopher Pappas · Answer 8 · Fri Jul 24 2020 03:44:44 GMT+0800 (China Standard Time)

Closing this with Adopted. PR incoming shortly.