From 17f73d88d79ca2e13944e0b0ce55d06229074c4d Mon Sep 17 00:00:00 2001
From: Divyanshu Agrawal <agrawal.divyanshu@outlook.com>
Date: Mon, 25 May 2020 14:08:25 +0530
Subject: [PATCH 1/3] sharing: Add UI to receive and handle shares from other
 apps.

This completes most of the implementation of #117.  To enable the
feature as it currently exists, it's enough to uncomment the
commented-out bit of the manifest, so that Zulip appears in the
"sharing" UI when attempting to share something from another app.

The reason we don't yet enable/advertise the feature is that there
are some blocker bugs -- most notably, it crashes when you try to
use it.  That didn't use to happen, on a branch based on an older
version from master, but it does now after rebasing.  (The error
message suggests it's probably related to our recent upgrades of
the RN version we use.)

The 'react-navigation' code was suggested by Chris Bobbe.

Suggested-in-part-by: Chris Bobbe <cbobbe@zulip.com>
---
 android/app/src/main/AndroidManifest.xml |  12 +-
 src/boot/AppEventHandlers.js             |   5 +
 src/nav/AppNavigator.js                  |   2 +
 src/nav/navActions.js                    |   4 +
 src/sharing/ChooseRecipientsScreen.js    |  44 +++++
 src/sharing/ShareToPm.js                 | 225 +++++++++++++++++++++
 src/sharing/ShareToStream.js             | 240 +++++++++++++++++++++++
 src/sharing/SharingScreen.js             |  82 ++++++++
 src/sharing/index.js                     |  53 +++++
 src/types.js                             |  21 ++
 static/translations/messages_en.json     |   7 +
 11 files changed, 685 insertions(+), 10 deletions(-)
 create mode 100644 src/sharing/ChooseRecipientsScreen.js
 create mode 100644 src/sharing/ShareToPm.js
 create mode 100644 src/sharing/ShareToStream.js
 create mode 100644 src/sharing/SharingScreen.js
 create mode 100644 src/sharing/index.js

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 79251b52575..0d85b21edaf 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -41,22 +41,14 @@
             <category android:name="android.intent.category.BROWSABLE" />
             <data android:scheme="zulip" android:host="login" />
         </intent-filter>
-      </activity>
-
-    <!-- Disabled while the feature is experimental.  See #117 and #4124.
-      <activity
-        android:name=".MainActivity"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
-        android:label="@string/app_name"
-        android:launchMode="singleTask"
-        android:windowSoftInputMode="adjustResize">
+        <!-- Disabled while the feature is experimental.  See #117 and #4124.
         <intent-filter>
             <action android:name="android.intent.action.SEND" />
             <category android:name="android.intent.category.DEFAULT" />
             <data android:mimeType="*/*" />
         </intent-filter>
+        -->
       </activity>
-    -->
 
       <!-- When `react-native run-android` learns from the decoy `package`
            attribute in our comment above that the application ID is
diff --git a/src/boot/AppEventHandlers.js b/src/boot/AppEventHandlers.js
index 0763383ff56..32438d03f99 100644
--- a/src/boot/AppEventHandlers.js
+++ b/src/boot/AppEventHandlers.js
@@ -15,6 +15,7 @@ import {
   NotificationListener,
   notificationOnAppActive,
 } from '../notification';
+import { ShareReceivedListener, handleInitialShare } from '../sharing';
 import { appOnline, appOrientation, initSafeAreaInsets } from '../actions';
 import PresenceHeartbeat from '../presence/PresenceHeartbeat';
 
@@ -113,6 +114,7 @@ class AppEventHandlers extends PureComponent<Props> {
   };
 
   notificationListener = new NotificationListener(this.props.dispatch);
+  shareListener = new ShareReceivedListener(this.props.dispatch);
 
   handleMemoryWarning = () => {
     // Release memory here
@@ -121,6 +123,7 @@ class AppEventHandlers extends PureComponent<Props> {
   componentDidMount() {
     const { dispatch } = this.props;
     handleInitialNotification(dispatch);
+    handleInitialShare(dispatch);
 
     this.netInfoDisconnectCallback = NetInfo.addEventListener(this.handleConnectivityChange);
     AppState.addEventListener('change', this.handleAppStateChange);
@@ -130,6 +133,7 @@ class AppEventHandlers extends PureComponent<Props> {
     );
     ScreenOrientation.addOrientationChangeListener(this.handleOrientationChange);
     this.notificationListener.start();
+    this.shareListener.start();
   }
 
   componentWillUnmount() {
@@ -141,6 +145,7 @@ class AppEventHandlers extends PureComponent<Props> {
     AppState.removeEventListener('memoryWarning', this.handleMemoryWarning);
     ScreenOrientation.removeOrientationChangeListeners();
     this.notificationListener.stop();
+    this.shareListener.stop();
   }
 
   render() {
diff --git a/src/nav/AppNavigator.js b/src/nav/AppNavigator.js
index 15394e5c0ca..c9a524e98b2 100644
--- a/src/nav/AppNavigator.js
+++ b/src/nav/AppNavigator.js
@@ -31,6 +31,7 @@ import TopicListScreen from '../topics/TopicListScreen';
 import EmojiPickerScreen from '../emoji/EmojiPickerScreen';
 import LegalScreen from '../settings/LegalScreen';
 import UserStatusScreen from '../user-status/UserStatusScreen';
+import SharingScreen from '../sharing/SharingScreen';
 
 export default createStackNavigator(
   // $FlowFixMe react-navigation types :-/ -- see a36814e80
@@ -65,6 +66,7 @@ export default createStackNavigator(
     notifications: { screen: NotificationsScreen },
     legal: { screen: LegalScreen },
     'user-status': { screen: UserStatusScreen },
+    sharing: { screen: SharingScreen },
   },
   {
     initialRouteName: 'main',
diff --git a/src/nav/navActions.js b/src/nav/navActions.js
index 5722aaab9ef..1b5ec43e06b 100644
--- a/src/nav/navActions.js
+++ b/src/nav/navActions.js
@@ -9,6 +9,7 @@ import type {
   Narrow,
   UserOrBot,
   ApiResponseServerSettings,
+  SharedData,
 } from '../types';
 import { getSameRoutesCount } from '../selectors';
 
@@ -103,3 +104,6 @@ export const navigateToLegal = (): NavigationAction => StackActions.push({ route
 
 export const navigateToUserStatus = (): NavigationAction =>
   StackActions.push({ routeName: 'user-status' });
+
+export const navigateToSharing = (sharedData: SharedData): NavigationAction =>
+  StackActions.push({ routeName: 'sharing', params: { sharedData } });
diff --git a/src/sharing/ChooseRecipientsScreen.js b/src/sharing/ChooseRecipientsScreen.js
new file mode 100644
index 00000000000..3a25f4caa59
--- /dev/null
+++ b/src/sharing/ChooseRecipientsScreen.js
@@ -0,0 +1,44 @@
+/* @flow strict-local */
+import React, { PureComponent } from 'react';
+import type { User, Dispatch } from '../types';
+import { connect } from '../react-redux';
+import { Screen } from '../common';
+import UserPickerCard from '../user-picker/UserPickerCard';
+
+type Props = $ReadOnly<{|
+  dispatch: Dispatch,
+  onComplete: (User[]) => void,
+|}>;
+
+type State = {|
+  filter: string,
+|};
+
+class ChooseRecipientsScreen extends PureComponent<Props, State> {
+  state = {
+    filter: '',
+  };
+
+  handleFilterChange = (filter: string) => this.setState({ filter });
+
+  handleComplete = (selected: Array<User>) => {
+    const { onComplete } = this.props;
+    onComplete(selected);
+  };
+
+  render() {
+    const { filter } = this.state;
+    return (
+      <Screen
+        search
+        scrollEnabled={false}
+        searchBarOnChange={this.handleFilterChange}
+        canGoBack={false}
+      >
+        <UserPickerCard filter={filter} onComplete={this.handleComplete} />
+      </Screen>
+    );
+  }
+}
+
+export default connect<{||}, _, _>()(ChooseRecipientsScreen);
diff --git a/src/sharing/ShareToPm.js b/src/sharing/ShareToPm.js
new file mode 100644
index 00000000000..33a79c06e1f
--- /dev/null
+++ b/src/sharing/ShareToPm.js
@@ -0,0 +1,225 @@
+/* @flow strict-local */
+import React from 'react';
+import { View, StyleSheet, Image, ScrollView, Modal, BackHandler } from 'react-native';
+import { type NavigationNavigatorProps } from 'react-navigation';
+import type { Dispatch, SharedData, User, Auth, GetText } from '../types';
+import { TranslationContext } from '../boot/TranslationProvider';
+
+import { connect } from '../react-redux';
+import { ZulipButton, Input, Label } from '../common';
+import UserItem from '../users/UserItem';
+import { sendMessage, uploadFile } from '../api';
+import { getAuth } from '../selectors';
+import { showToast } from '../utils/info';
+import { navigateBack } from '../nav/navActions';
+import ChooseRecipientsScreen from './ChooseRecipientsScreen';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    padding: 10,
+  },
+  imagePreview: {
+    margin: 10,
+    borderRadius: 5,
+    width: 200,
+    height: 200,
+  },
+  container: {
+    flex: 1,
+  },
+  actions: {
+    flexDirection: 'row',
+  },
+  button: {
+    flex: 1,
+    margin: 8,
+  },
+  usersPreview: {
+    padding: 10,
+  },
+  chooseButton: {
+    marginTop: 8,
+    marginBottom: 8,
+    width: '50%',
+    alignSelf: 'flex-end',
+  },
+  message: {
+    height: 70,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: 'whitesmoke',
+    padding: 5,
+  },
+});
+
+type Props = $ReadOnly<{|
+  ...$Exact<NavigationNavigatorProps<{||}, {| params: {| sharedData: SharedData |} |}>>,
+  dispatch: Dispatch,
+  auth: Auth,
+|}>;
+
+type State = $ReadOnly<{|
+  selectedRecipients: User[],
+  message: string,
+  choosingRecipients: boolean,
+  sending: boolean,
+|}>;
+
+class ShareToPm extends React.Component<Props, State> {
+  static contextType = TranslationContext;
+  context: GetText;
+
+  constructor(props) {
+    super(props);
+    const { sharedData } = this.props.navigation.state.params;
+    this.state = {
+      selectedRecipients: [],
+      message: sharedData.type === 'text' ? sharedData.sharedText : '',
+      choosingRecipients: false,
+      sending: false,
+    };
+  }
+
+  setSending = () => {
+    this.setState({ sending: true });
+  };
+
+  handleChooseRecipients = (selectedRecipients: Array<User>) => {
+    this.setState({ selectedRecipients });
+    this.setState({ choosingRecipients: false });
+  };
+
+  handleSend = async () => {
+    this.setSending();
+
+    const _ = this.context;
+    const { selectedRecipients, message } = this.state;
+    let messageToSend = message;
+    const { auth } = this.props;
+    const { sharedData } = this.props.navigation.state.params;
+    const to = JSON.stringify(selectedRecipients.map(user => user.user_id));
+
+    try {
+      showToast(_('Sending Message...'));
+
+      if (sharedData.type === 'image' || sharedData.type === 'file') {
+        const url =
+          sharedData.type === 'image' ? sharedData.sharedImageUrl : sharedData.sharedFileUrl;
+        const fileName = url.split('/').pop();
+        const response = await uploadFile(auth, url, fileName);
+        messageToSend += `\n[${fileName}](${response.uri})`;
+      }
+      await sendMessage(auth, { content: messageToSend, type: 'private', to });
+    } catch (err) {
+      showToast(_('Failed to send message'));
+      this.finishShare();
+      return;
+    }
+
+    showToast(_('Message sent'));
+    this.finishShare();
+  };
+
+  finishShare = () => {
+    const { dispatch } = this.props;
+
+    dispatch(navigateBack());
+    BackHandler.exitApp();
+  };
+
+  handleMessageChange = message => {
+    this.setState({ message });
+  };
+
+  isSendButtonEnabled = () => {
+    const { message, selectedRecipients } = this.state;
+    const { sharedData } = this.props.navigation.state.params;
+
+    if (sharedData.type === 'text') {
+      return message !== '' && selectedRecipients.length > 0;
+    }
+
+    return selectedRecipients.length > 0;
+  };
+
+  renderUsersPreview = () => {
+    const { selectedRecipients } = this.state;
+
+    if (selectedRecipients.length === 0) {
+      return <Label text="Please choose recipients to share with" />;
+    }
+    const preview = [];
+    selectedRecipients.forEach((user: User) => {
+      preview.push(
+        <UserItem
+          avatarUrl={user.avatar_url}
+          email={user.email}
+          fullName={user.full_name}
+          onPress={() => {}}
+          key={user.user_id}
+        />,
+      );
+    });
+    return preview;
+  };
+
+  render() {
+    const { message, choosingRecipients, sending } = this.state;
+
+    if (choosingRecipients) {
+      return (
+        <Modal>
+          <ChooseRecipientsScreen onComplete={this.handleChooseRecipients} />
+        </Modal>
+      );
+    }
+
+    const { sharedData } = this.props.navigation.state.params;
+    let sharePreview = null;
+    if (sharedData.type === 'image') {
+      sharePreview = (
+        <Image
+          source={{ uri: sharedData.sharedImageUrl }}
+          width={200}
+          height={200}
+          style={styles.imagePreview}
+        />
+      );
+    }
+
+    return (
+      <>
+        <ScrollView style={styles.wrapper} keyboardShouldPersistTaps="always">
+          <View style={styles.container}>{sharePreview}</View>
+          <View style={styles.usersPreview}>{this.renderUsersPreview()}</View>
+          <ZulipButton
+            onPress={() => this.setState({ choosingRecipients: true })}
+            style={styles.chooseButton}
+            text="Choose recipients"
+          />
+          <Input
+            value={message}
+            placeholder="Message"
+            onChangeText={this.handleMessageChange}
+            multiline
+          />
+        </ScrollView>
+        <View style={styles.actions}>
+          <ZulipButton onPress={this.finishShare} style={styles.button} secondary text="Cancel" />
+          <ZulipButton
+            style={styles.button}
+            onPress={this.handleSend}
+            text="Send"
+            progress={sending}
+            disabled={!this.isSendButtonEnabled()}
+          />
+        </View>
+      </>
+    );
+  }
+}
+
+export default connect(state => ({
+  auth: getAuth(state),
+}))(ShareToPm);
diff --git a/src/sharing/ShareToStream.js b/src/sharing/ShareToStream.js
new file mode 100644
index 00000000000..4ae43c58608
--- /dev/null
+++ b/src/sharing/ShareToStream.js
@@ -0,0 +1,240 @@
+/* @flow strict-local */
+import React from 'react';
+import { View, StyleSheet, Image, ScrollView, BackHandler } from 'react-native';
+import { type NavigationNavigatorProps } from 'react-navigation';
+import type { Dispatch, SharedData, Subscription, Auth, GetText } from '../types';
+import { TranslationContext } from '../boot/TranslationProvider';
+import { connect } from '../react-redux';
+import { ZulipButton, Input } from '../common';
+import { getSubscriptionsById } from '../subscriptions/subscriptionSelectors';
+import StreamAutocomplete from '../autocomplete/StreamAutocomplete';
+import TopicAutocomplete from '../autocomplete/TopicAutocomplete';
+import AnimatedScaleComponent from '../animation/AnimatedScaleComponent';
+import { uploadFile, sendMessage } from '../api';
+import { streamNarrow } from '../utils/narrow';
+import { getAuth } from '../selectors';
+import { showToast } from '../utils/info';
+import { navigateBack } from '../nav/navActions';
+import { fetchTopicsForStream } from '../topics/topicActions';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    padding: 10,
+  },
+  imagePreview: {
+    margin: 10,
+    borderRadius: 5,
+    width: 200,
+    height: 200,
+  },
+  container: {
+    flex: 1,
+  },
+  actions: {
+    flexDirection: 'row',
+  },
+  button: {
+    flex: 1,
+    margin: 8,
+  },
+});
+
+type Props = $ReadOnly<{|
+  ...$Exact<NavigationNavigatorProps<{||}, {| params: {| sharedData: SharedData |} |}>>,
+  dispatch: Dispatch,
+  subscriptions: Map<number, Subscription>,
+  auth: Auth,
+|}>;
+
+type State = $ReadOnly<{|
+  stream: string,
+  topic: string,
+  message: string,
+  isStreamFocused: boolean,
+  isTopicFocused: boolean,
+  sending: boolean,
+|}>;
+
+class ShareToStream extends React.Component<Props, State> {
+  static contextType = TranslationContext;
+  context: GetText;
+
+  state = {
+    stream: '',
+    topic: '',
+    message: this.props.navigation.state.params.sharedData.sharedText || '',
+    isStreamFocused: false,
+    isTopicFocused: false,
+    sending: false,
+  };
+
+  setSending = () => {
+    this.setState({ sending: true });
+  };
+
+  blurStream = () => {
+    this.setState({ isStreamFocused: false });
+  };
+
+  focusStream = () => {
+    this.setState({ isStreamFocused: true });
+  };
+
+  blurTopic = () => {
+    this.setState({ isTopicFocused: false });
+  };
+
+  focusTopic = () => {
+    const { stream } = this.state;
+    const { dispatch } = this.props;
+    const narrow = streamNarrow(stream);
+
+    dispatch(fetchTopicsForStream(narrow));
+    this.setState({ isTopicFocused: true });
+  };
+
+  handleMessageChange = message => {
+    this.setState({ message });
+  };
+
+  handleStreamChange = stream => {
+    this.setState({ stream });
+  };
+
+  handleTopicChange = topic => {
+    this.setState({ topic });
+  };
+
+  handleStreamAutoComplete = (rawStream: string) => {
+    const stream = rawStream.split('**')[1];
+    this.setState({ stream, isStreamFocused: false });
+  };
+
+  handleTopicAutoComplete = (topic: string) => {
+    this.setState({ topic });
+  };
+
+  handleSend = async () => {
+    this.setSending();
+    const _ = this.context;
+    const { topic, stream, message } = this.state;
+    let messageToSend = message;
+    const { auth } = this.props;
+    const { sharedData } = this.props.navigation.state.params;
+
+    try {
+      showToast(_('Sending Message...'));
+      if (sharedData.type !== 'text') {
+        const url =
+          sharedData.type === 'image' ? sharedData.sharedImageUrl : sharedData.sharedFileUrl;
+        const fileName = url.split('/').pop();
+        const response = await uploadFile(auth, url, fileName);
+        messageToSend += `\n[${fileName}](${response.uri})`;
+      }
+      await sendMessage(auth, {
+        content: messageToSend,
+        type: 'stream',
+        subject: topic,
+        to: stream,
+      });
+    } catch (err) {
+      showToast(_('Failed to send message'));
+      this.finishShare();
+      return;
+    }
+    showToast(_('Message sent'));
+    this.finishShare();
+  };
+
+  finishShare = () => {
+    const { dispatch } = this.props;
+
+    dispatch(navigateBack());
+    BackHandler.exitApp();
+  };
+
+  isSendButtonEnabled = () => {
+    const { stream, topic, message } = this.state;
+    const { sharedData } = this.props.navigation.state.params;
+
+    if (sharedData.type !== 'text') {
+      return stream !== '' && topic !== '';
+    }
+
+    return stream !== '' && topic !== '' && message !== '';
+  };
+
+  render() {
+    const { sharedData } = this.props.navigation.state.params;
+    const { stream, topic, message, isStreamFocused, isTopicFocused, sending } = this.state;
+    const narrow = streamNarrow(stream);
+
+    return (
+      <>
+        <ScrollView style={styles.wrapper} keyboardShouldPersistTaps="always">
+          <View style={styles.container}>
+            {sharedData.type === 'image' && (
+              <Image
+                source={{ uri: sharedData.sharedImageUrl }}
+                width={200}
+                height={200}
+                style={styles.imagePreview}
+              />
+            )}
+            <AnimatedScaleComponent visible={isStreamFocused}>
+              <StreamAutocomplete filter={stream} onAutocomplete={this.handleStreamAutoComplete} />
+            </AnimatedScaleComponent>
+            <Input
+              placeholder="Stream"
+              value={stream}
+              onChangeText={this.handleStreamChange}
+              onFocus={this.focusStream}
+              onChange={this.focusStream}
+              onBlur={this.blurStream}
+              selectTextOnFocus
+            />
+            <View />
+            <AnimatedScaleComponent visible={isTopicFocused}>
+              <TopicAutocomplete
+                text={topic}
+                onAutocomplete={this.handleTopicAutoComplete}
+                isFocused={isTopicFocused}
+                narrow={narrow}
+              />
+            </AnimatedScaleComponent>
+            <Input
+              placeholder="Topic"
+              value={topic}
+              onFocus={this.focusTopic}
+              onBlur={this.blurTopic}
+              onChangeText={this.handleTopicChange}
+              editable={stream !== ''}
+            />
+            <Input
+              placeholder="Message"
+              value={message}
+              onChangeText={this.handleMessageChange}
+              multiline
+            />
+          </View>
+        </ScrollView>
+        <View style={styles.actions}>
+          <ZulipButton onPress={this.finishShare} style={styles.button} secondary text="Cancel" />
+          <ZulipButton
+            style={styles.button}
+            onPress={this.handleSend}
+            text="Send"
+            progress={sending}
+            disabled={!this.isSendButtonEnabled()}
+          />
+        </View>
+      </>
+    );
+  }
+}
+
+export default connect(state => ({
+  subscriptions: getSubscriptionsById(state),
+  auth: getAuth(state),
+}))(ShareToStream);
diff --git a/src/sharing/SharingScreen.js b/src/sharing/SharingScreen.js
new file mode 100644
index 00000000000..33ddd55ae73
--- /dev/null
+++ b/src/sharing/SharingScreen.js
@@ -0,0 +1,82 @@
+/* @flow strict-local */
+import React, { PureComponent } from 'react';
+import type { NavigationScreenProp } from 'react-navigation';
+import { createMaterialTopTabNavigator } from 'react-navigation';
+import { BRAND_COLOR } from '../styles/constants';
+import type { Dispatch, SharedData, Auth } from '../types';
+import { connect } from '../react-redux';
+import { Screen } from '../common';
+import { tryGetAuth } from '../selectors';
+import { navigateToAccountPicker } from '../nav/navActions';
+import ShareToStream from './ShareToStream';
+import ShareToPm from './ShareToPm';
+
+type Props = $ReadOnly<{|
+  navigation: NavigationScreenProp<{ params: {| sharedData: SharedData |} }>,
+  auth: Auth | void,
+  dispatch: Dispatch,
+|}>;
+
+const SharingTopTabNavigator = createMaterialTopTabNavigator(
+  {
+    Stream: {
+      // Requires additional props that we dont need. $FlowFixMe.
+      screen: ShareToStream,
+    },
+    'Private Message': {
+      // Requires additional props that we dont need. $FlowFixMe.
+      screen: ShareToPm,
+    },
+  },
+  {
+    tabBarPosition: 'top',
+    animationEnabled: true,
+    tabBarOptions: {
+      upperCaseLabel: false,
+      pressColor: BRAND_COLOR,
+      activeTintColor: BRAND_COLOR,
+      inactiveTintColor: 'gray',
+      labelStyle: {
+        fontSize: 14,
+        margin: 0,
+        padding: 10,
+      },
+      indicatorStyle: {
+        backgroundColor: BRAND_COLOR,
+      },
+      tabStyle: {
+        flex: 1,
+      },
+      style: {
+        backgroundColor: 'transparent',
+        borderWidth: 0,
+        elevation: 0,
+      },
+    },
+  },
+);
+
+class SharingScreen extends PureComponent<Props> {
+  static router = SharingTopTabNavigator.router;
+
+  render() {
+    const { navigation, auth, dispatch } = this.props;
+
+    // If there is no active logged-in account, abandon the sharing attempt,
+    // and present the account picker screen to the user.
+    if (auth === undefined) {
+      dispatch(navigateToAccountPicker());
+      return null;
+    }
+
+    return (
+      <Screen canGoBack={false} title="Share on Zulip" shouldShowLoadingBanner={false}>
+        <SharingTopTabNavigator navigation={navigation} />
+      </Screen>
+    );
+  }
+}
+
+export default connect(state => ({
+  auth: tryGetAuth(state),
+}))(SharingScreen);
diff --git a/src/sharing/index.js b/src/sharing/index.js
new file mode 100644
index 00000000000..7fe5ba037f0
--- /dev/null
+++ b/src/sharing/index.js
@@ -0,0 +1,53 @@
+/* @flow strict-local */
+import { NativeModules, DeviceEventEmitter, Platform } from 'react-native';
+import type { Dispatch, SharedData } from '../types';
+import { navigateToSharing } from '../actions';
+
+const { Sharing } = NativeModules;
+
+export const handleInitialShare = async (dispatch: Dispatch) => {
+  const initialSharedData: SharedData | null = await Sharing.getInitialSharedContent();
+  if (initialSharedData !== null) {
+    dispatch(navigateToSharing(initialSharedData));
+  }
+};
+
+export class ShareReceivedListener {
+  dispatch: Dispatch;
+  unsubs: Array<() => void> = [];
+
+  constructor(dispatch: Dispatch) {
+    this.dispatch = dispatch;
+  }
+
+  /** Private. */
+  listen(name: string, handler: (...empty) => void | Promise<void>) {
+    if (Platform.OS === 'android') {
+      const subscription = DeviceEventEmitter.addListener(name, handler);
+      this.unsubs.push(() => subscription.remove());
+    }
+  }
+
+  /** Private. */
+  unlistenAll() {
+    while (this.unsubs.length > 0) {
+      this.unsubs.pop()();
+    }
+  }
+
+  handleShareReceived = (data: SharedData) => {
+    this.dispatch(navigateToSharing(data));
+  };
+
+  /** Start listening.  Don't call twice without intervening `stop`. */
+  start() {
+    if (Platform.OS === 'android') {
+      this.listen('shareReceived', this.handleShareReceived);
+    }
+  }
+
+  /** Stop listening. */
+  stop() {
+    this.unlistenAll();
+  }
+}
diff --git a/src/types.js b/src/types.js
index 81ee75cc741..6fa3fd72c82 100644
--- a/src/types.js
+++ b/src/types.js
@@ -324,3 +324,24 @@ export type PmConversationData = {|
   recipients: string,
   unread: number,
 |};
+
+export type SharedText = {|
+  type: 'text',
+  sharedText: string,
+|};
+
+export type SharedImage = {|
+  type: 'image',
+  sharedImageUrl: string,
+|};
+
+export type SharedFile = {|
+  type: 'file',
+  sharedFileUrl: string,
+|};
+
+/**
+ * The type of data that can be shared to this app from 3rd party apps - either
+ * plain text or an image or a file.
+ */
+export type SharedData = SharedText | SharedImage | SharedFile;
diff --git a/static/translations/messages_en.json b/static/translations/messages_en.json
index 820231ce357..3a47920480f 100644
--- a/static/translations/messages_en.json
+++ b/static/translations/messages_en.json
@@ -206,6 +206,13 @@
   "User status": "User status",
   "Muted": "Muted",
   "No topics found": "No topics found",
+  "Share on Zulip": "Share on Zulip",
+  "Choose recipients": "Choose recipients",
+  "Please choose recipients to share with.": "Please choose recipients to share with.",
+  "Narrow": "Narrow",
+  "Sending Message...": "Sending Message...",
+  "Failed to send message": "Failed to send message",
+  "Message sent": "Message sent",
   "What's your status?": "What's your status?",
   "📅 In a meeting": "📅 In a meeting",
   "🚌 Commuting": "🚌 Commuting",

From 811a7e00e4b8aaa3450d746827df779dea32898e Mon Sep 17 00:00:00 2001
From: Greg Price <greg@zulipchat.com>
Date: Fri, 17 Jul 2020 22:48:53 -0700
Subject: [PATCH 2/3] sharing [nfc]: Adjust jsdoc for SharedData type.

---
 src/types.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/types.js b/src/types.js
index 6fa3fd72c82..f173bafa93f 100644
--- a/src/types.js
+++ b/src/types.js
@@ -341,7 +341,6 @@ export type SharedFile = {|
 |};
 
 /**
- * The type of data that can be shared to this app from 3rd party apps - either
- * plain text or an image or a file.
+ * The data we get when the user "shares" to Zulip from another app.
  */
 export type SharedData = SharedText | SharedImage | SharedFile;

From 59658c49e07b04e9cbed0ebc2b6e459db379a8c8 Mon Sep 17 00:00:00 2001
From: Greg Price <greg@zulipchat.com>
Date: Fri, 17 Jul 2020 22:50:00 -0700
Subject: [PATCH 3/3] sharing [nfc]: Clarify a couple of $FlowFixMe markers.

It's essential that the $FlowFixMe come at the start of the comment
line -- otherwise it's easy to miss when scanning the code by eye.

Also adjust the comments to refer to the obstruction that explains
why we haven't simply fixed the type error.
---
 src/sharing/SharingScreen.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/sharing/SharingScreen.js b/src/sharing/SharingScreen.js
index 33ddd55ae73..d9210d43edf 100644
--- a/src/sharing/SharingScreen.js
+++ b/src/sharing/SharingScreen.js
@@ -20,11 +20,11 @@ type Props = $ReadOnly<{|
 const SharingTopTabNavigator = createMaterialTopTabNavigator(
   {
     Stream: {
-      // Requires additional props that we dont need. $FlowFixMe.
+      // $FlowFixMe react-navigation types :-/ -- see a36814e80
       screen: ShareToStream,
     },
     'Private Message': {
-      // Requires additional props that we dont need. $FlowFixMe.
+      // $FlowFixMe react-navigation types :-/ -- see a36814e80
       screen: ShareToPm,
     },
   },