Mattermost-server: Quick access to camera roll for attaching photos on mobile

[mattermod]

Goal

With the recent improvements to the post draft input, there’s also an opportunity to more easily access user’s recent photos and reduce the number of taps to attach a recent photo to a message.

Requirements Summary

• Utilize the keyboard space to display a grid of recent photos
• Limit of 50 recent photos or videos displayed in the photo tray
• Ability to select 1-5 photos from recent photos displayed and add it to post draft
  
  
  
  • Visually indicate which photo is selected within the photo tray
  
  
  • Provide ability to deselect photo from within the photo tray and remove from the post draft as well
  
  
  • Provide feedback if Max selected images has been reached (currently account for with error message “Uploads limited to 5 files maximum”)
  
  
• Provide a way to view full photo library
  
  
  
  • Launches the standard OS photos selector
  
  
• If a user takes a photo with their phone’s camera, that photo should immediately be added as the first image in the photo tray

Spec doc

Figma prototype

Figma workfile files for developer inspection

Note: This is blocked until PR https://github.com/mattermost/mattermost-mobile/pull/4122 is merged.

---

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA: https://mattermost.atlassian.net/browse/MM-21167

[a-c-sreedhar-reddy]

@enahum We cannot use image picker library to achieve this right? To achieve this one has to write the native code to read images right?

[enahum]

@a-c-sreedhar-reddy you could potentially use the camera roll https://github.com/react-native-cameraroll/react-native-cameraroll there is also https://www.npmjs.com/package/react-native-image-video-picker-editor that you could look into

[a-c-sreedhar-reddy]

@enahum cool can I try this?

[enahum]

@a-c-sreedhar-reddy sure thing

[a-c-sreedhar-reddy]

@enahum https://github.com/blazerroadg/react-native-image-video-picker-editor opens a new modal. Should the UI fill the keyboard space or the entire screen?

[enahum]

@a-c-sreedhar-reddy It should be the keyboard space, basically you'll need to replace the keybord with an image/video picker

[a-c-sreedhar-reddy]

@enahum how can I know the keyboard height without rendering a keyboard? Any idea?

[enahum]

You want something like this https://github.com/wix/react-native-keyboard-input although that lib is deprecated

[enahum]

@a-c-sreedhar-reddy Maybe take a look at https://medium.com/gravitywell-uk/part-1-creating-a-custom-image-keyboard-with-react-native-ec645c84e5d1

[a-c-sreedhar-reddy]

I thought I could use react-native-ui-lib's component KeyboardAcessoryView.

On Sat, 28 Nov 2020 at 01:16, Elias Nahum [e-mail] wrote:

@a-c-sreedhar-reddy https://github.com/a-c-sreedhar-reddy Maybe take a
look at
https://medium.com/gravitywell-uk/part-1-creating-a-custom-image-keyboard-with-react-native-ec645c84e5d1

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mattermost/mattermost-server/issues/14478#issuecomment-734965190,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AD2WBO773LDZI4BUSK4MUELSR763DANCNFSM4MZZY5DA
.

[enahum]

KeyboardAccesoryView is used for something totally different, is to set an element on top of the keyboard and it follows when it opens and closes, we already use it for the textInput...

[a-c-sreedhar-reddy]

Hi @amyblais I might not be able to work on this. Can you please unassign me so that it would be open for others?