[Improvement] Add expensify.cash to iOS and Android native share menus

[sakluger]

If you haven’t already, check out our contributing guidelines for onboarding!

---

Platform - version:
iOS, Android - All versions

Problem

A common action when using a mobile device is to share something (a web page, an image, a tweet, etc) with another person. Both iOS and Android have a native "share" button that allows you to share things via apps that you have installed on your phone.

Here's an example of what the native iOS share menu looks like:

Why is this important?

The native share function is a common flow and one of the easier ways to share something with someone. For example, I find it to be easier than copying the url of a web page from my mobile browser, switching apps, and pasting it in to the messenger app. It's much easier to just hit the share button, choose the messenger app, and select who I want to send the url to.

Solution

Add support for sharing directly to our app. Here is an example react native library that helps with this, though I haven't done any research into it. I think the way we would implement it is:

1. Expensify.cash shows up as an option in the native share menu
2. When Expensify.cash is selected, we bring up your Expensify.cash home screen (Screenshot is below)
3. You can select a chat
4. Whatever you are sharing (url, image, etc) is sent to that chat

This is very similar to the flow when using the native share functionality with WhatsApp.

Screenshot of Expensify.cash home screen:

Upwork Job Link: https://www.upwork.com/jobs/~01fb534e5bfc655563

[tugbadogan]

Is this task still available? I would like to work on this issue.

[sakluger]

Hi @tugbadogan thanks for the interest! It is not available, but any available issues should be posted on Upwork.

[r8]

I evaluated several React Native libraries, but it looks like the real choice is only between two of them:

• react-native-share-extension
• react-native-share-menu

The former looks more popular, but requires manual install and haven't been updated in a while, which causes a lot of troubles and compatibility issues with latest React versions. So probably it's better to go with react-native-share-menu, like it was proposed in issue description.

I've tested the integration, it works more or less fine, but has one issue on iOS: Expensify/react-native-share-menu#82

My proposal is to create libs/ShareManager module, similar to ActiveClientManager or Notification.
Something like that:

libs/ShareManager/index.native.js

import ShareMenu from 'react-native-share-menu';

let listener;

function handleShare(item) {
    // Check the shared item, save it to Onyx 
    // and redirect to chat chooser interface
}

function register() {
    ShareMenu.getInitialShare(handleShare);
    listener = ShareMenu.addNewShareListener(handleShare);
}

function unregister() {
    listener.remove();
}

export {
    register,
    unregister,
};

The code should go index.native.js, and nooped in index.js, because it will not work in web and desktop anyway.
Then we should register in componentDidMount of Expensify.js and unregister in componentWillUnmount.

Instead of showing the Home screen with a list of chats I suggest to create a separate screen for that.
If we will reuse Home screen, we would have to:

• Hide user avatar, because when user taps on it, it will open the Settings screen and break the sharing flow
• Change the onTap callback for chats in the list, because instead of just opening the chat, first we would need to post a message.

With all these new conditions, checks (and the fact that sharing should work only on mobile) Home screen and Sidebar can become too heavy. So maybe it's better to create a separate SharingScreen and reuse sidebar components or even whole SidebarView there.

[marcaaron]

@r8 Thanks for the proposal, plan sounds good 👍

I agree with you that we should create a separate SharePage that reuses sidebar components.

[MelvinBot]

it looks like no one is assigned to work on this job.
Please double the price or add a comment stating why the job isn't being doubled.

[MelvinBot]

@sakluger, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.