From bea5ce1f710889714af160a4ee5c0d51819d1e62 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] android: Receive and handle shares from other apps.

Enables handling and receiving shares from other apps, for any
type of content (text, images, and other files).

Creates a native RN module `SharingModule` to handle the Android
part of this feature. 'ReceiveShareActivity.kt' parses the
received shared data and handles activating the JS part of the
codebase - either by sending an event to an already-running app,
or launching `MainActivity` with some initial shared data via
the native module.

Registers a new root component, `SharingRoot`. It is a dummy
component that does nothing, and `ReceiveShareActivity.kt`.
It exists because 'Sharing' is linked with launching an activity
in the Android ecosystem. But we don't always want to launch
`MainActivity` when receiving a share because it may cause two
instances of it to be opened simultaneously. We can't check
whether the app is running before an activity launches.
So, we launch this dummy component, then process the events,
identify whether the app is running or not, and handle that
as mentioned in the paragraph above, and then quickly kill this
dummy Activity. All of this happens fast enough that the
component does not even get time to render, so it's seamless.

Closes  #M117.
---
 android/app/src/main/AndroidManifest.xml      |  23 +
 .../java/com/zulipmobile/MainApplication.java |   2 +
 .../sharing/ReceiveShareActivity.kt           | 110 ++++
 .../com/zulipmobile/sharing/SharingModule.kt  |  24 +
 .../com/zulipmobile/sharing/SharingPackage.kt |  26 +
 index.js                                      |   2 +
 src/boot/AppEventHandlers.js                  |   6 +-
 src/nav/AppNavigator.js                       |   2 +
 src/nav/navActions.js                         |   4 +
 src/nav/navReducer.js                         |   5 +
 src/sharing/ChooseRecipientsScreen.js         |  44 ++
 src/sharing/SharingRoot.js                    |  18 +
 src/sharing/SharingScreen.js                  | 472 ++++++++++++++++++
 src/sharing/index.js                          |  57 +++
 src/types.js                                  |  17 +
 static/translations/messages_en.json          |  10 +-
 16 files changed, 820 insertions(+), 2 deletions(-)
 create mode 100644 android/app/src/main/java/com/zulipmobile/sharing/ReceiveShareActivity.kt
 create mode 100644 android/app/src/main/java/com/zulipmobile/sharing/SharingModule.kt
 create mode 100644 android/app/src/main/java/com/zulipmobile/sharing/SharingPackage.kt
 create mode 100644 src/sharing/ChooseRecipientsScreen.js
 create mode 100644 src/sharing/SharingRoot.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 97e7b184ca5..a7ea6d25039 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -53,6 +53,29 @@
             </intent-filter>
         </activity>
 
+        <activity
+            android:name=".sharing.ReceiveShareActivity"
+            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+            android:label="@string/app_name"
+            android:launchMode="singleTask"
+            android:windowSoftInputMode="adjustResize">
+            <intent-filter>
+                <action android:name="android.intent.action.SEND" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <data android:mimeType="text/plain" />
+            </intent-filter>
+            <intent-filter>
+                <action android:name="android.intent.action.SEND" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <data android:mimeType="image/*" />
+            </intent-filter>
+            <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
              `com.zulipmobile.debug`, it then tries to start an activity
diff --git a/android/app/src/main/java/com/zulipmobile/MainApplication.java b/android/app/src/main/java/com/zulipmobile/MainApplication.java
index a954aefd98c..b77142b4538 100644
--- a/android/app/src/main/java/com/zulipmobile/MainApplication.java
+++ b/android/app/src/main/java/com/zulipmobile/MainApplication.java
@@ -27,6 +27,7 @@
 import com.zulipmobile.notifications.ConversationMap;
 import com.zulipmobile.notifications.FCMPushNotifications;
 import com.zulipmobile.notifications.NotificationsPackage;
+import com.zulipmobile.sharing.SharingPackage;
 
 public class MainApplication extends Application implements ReactApplication {
     private final ReactModuleRegistryProvider mModuleRegistryProvider = new ReactModuleRegistryProvider(new BasePackageList().getPackageList(), null);
@@ -58,6 +59,7 @@ protected List<ReactPackage> getPackages() {
                     new RNDeviceInfo(),
                     new ZulipNativePackage(),
                     new NotificationsPackage(),
+                    new SharingPackage(),
                     new ModuleRegistryAdapter(mModuleRegistryProvider)
             );
         }
diff --git a/android/app/src/main/java/com/zulipmobile/sharing/ReceiveShareActivity.kt b/android/app/src/main/java/com/zulipmobile/sharing/ReceiveShareActivity.kt
new file mode 100644
index 00000000000..8469c46b23b
--- /dev/null
+++ b/android/app/src/main/java/com/zulipmobile/sharing/ReceiveShareActivity.kt
@@ -0,0 +1,110 @@
+package com.zulipmobile.sharing
+
+import android.content.Context
+import android.content.Intent
+import android.content.res.Configuration
+import android.net.Uri
+import android.os.Bundle
+import android.util.Log
+import android.webkit.WebView
+import androidx.annotation.Nullable
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactApplication
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.bridge.Arguments
+import com.zulipmobile.notifications.*
+
+const val TAG = "ZulipReceiveShare"
+
+class ReceiveShareActivity : ReactActivity() {
+
+    /**
+     * Returns the name of the main component registered from JavaScript.
+     * This is used to schedule rendering of the component.
+     */
+    override fun getMainComponentName(): String? {
+        return "SharingRoot"
+    }
+
+    private fun sendEvent(reactContext: ReactContext,
+                          eventName: String,
+                          @Nullable params: WritableMap) {
+        Log.d(TAG, "Sending event with shared data")
+        emit(reactContext, eventName, params)
+    }
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        WebView.setWebContentsDebuggingEnabled(true)
+        if (intent?.action == Intent.ACTION_SEND) {
+            handleSend(intent)
+        }
+        finish()
+    }
+
+    private fun handleSend(intent: Intent) {
+        val application = application as ReactApplication
+        val host = application.reactNativeHost
+        val reactContext = host.tryGetReactInstanceManager()?.currentReactContext
+        val params: WritableMap
+        try {
+            params = getParamsFromIntent(intent)
+        } catch (e: ShareParamsParseException) {
+            Log.w(TAG, "Ignoring malformed share Intent: ${e.message}")
+            return
+        }
+
+        val appStatus = reactContext?.appStatus
+        when (appStatus) {
+            null, ReactAppStatus.NOT_RUNNING ->
+                // Either there's no JS environment running, or we haven't yet
+                // reached foreground.  Expect the app to check
+                // initialSharedData on launch.
+                SharingModule.initialSharedData = params
+            ReactAppStatus.BACKGROUND, ReactAppStatus.FOREGROUND ->
+                // JS is running and has already reached foreground. It won't
+                // check initialSharedData again, but it will see a
+                // shareReceived event.
+                sendEvent(reactContext, "shareReceived", params)
+        }
+        when (appStatus) {
+            null, ReactAppStatus.NOT_RUNNING, ReactAppStatus.BACKGROUND ->
+                launchMainActivity(application as Context)
+            ReactAppStatus.FOREGROUND -> Unit
+        }
+    }
+
+    private fun getParamsFromIntent(intent: Intent): WritableMap {
+        val params = Arguments.createMap()
+        when {
+            "text/plain" == intent.type -> {
+                val sharedText = intent.getStringExtra(Intent.EXTRA_TEXT)
+                params.putString("type", "text")
+                params.putString("sharedText", sharedText)
+            }
+            intent.type?.startsWith("image/") == true -> {
+                val url = intent.getParcelableExtra<Uri>(Intent.EXTRA_STREAM)
+                    ?: throw ShareParamsParseException("Could not extract URL from Image Intent")
+                params.putString("type", "image")
+                params.putString("sharedImageUrl", url.toString())
+            }
+            else -> {
+                val url = intent.getParcelableExtra<Uri>(Intent.EXTRA_STREAM)
+                    ?: throw ShareParamsParseException("Could not extract URL from File Intent")
+                params.putString("type", "file")
+                params.putString("sharedFileUrl", url.toString())
+            }
+        }
+        return params
+    }
+
+    override fun onConfigurationChanged(newConfig: Configuration) {
+        super.onConfigurationChanged(newConfig)
+        val intent = Intent("onConfigurationChanged")
+        intent.putExtra("newConfig", newConfig)
+        this.sendBroadcast(intent)
+    }
+}
+
+class ShareParamsParseException(errorMessage: String) : RuntimeException(errorMessage)
diff --git a/android/app/src/main/java/com/zulipmobile/sharing/SharingModule.kt b/android/app/src/main/java/com/zulipmobile/sharing/SharingModule.kt
new file mode 100644
index 00000000000..ce556c98182
--- /dev/null
+++ b/android/app/src/main/java/com/zulipmobile/sharing/SharingModule.kt
@@ -0,0 +1,24 @@
+package com.zulipmobile.sharing
+
+import com.facebook.react.bridge.*
+
+internal class SharingModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
+
+    override fun getName(): String {
+        return "Sharing"
+    }
+
+    @ReactMethod
+    fun getInitialSharedContent(promise: Promise) {
+        if (null == initialSharedData) {
+            promise.resolve(null)
+        } else {
+            promise.resolve(initialSharedData)
+        }
+
+    }
+
+    companion object {
+        var initialSharedData: WritableMap? = null
+    }
+}
diff --git a/android/app/src/main/java/com/zulipmobile/sharing/SharingPackage.kt b/android/app/src/main/java/com/zulipmobile/sharing/SharingPackage.kt
new file mode 100644
index 00000000000..203a6e85123
--- /dev/null
+++ b/android/app/src/main/java/com/zulipmobile/sharing/SharingPackage.kt
@@ -0,0 +1,26 @@
+package com.zulipmobile.sharing
+
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+import java.util.ArrayList
+
+class SharingPackage : ReactPackage {
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return emptyList()
+    }
+
+    override fun createNativeModules(
+        reactContext: ReactApplicationContext): List<NativeModule> {
+        val modules = ArrayList<NativeModule>()
+
+        modules.add(SharingModule(reactContext))
+
+        return modules
+    }
+
+}
diff --git a/index.js b/index.js
index cade378ab20..d7ca57af075 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,7 @@
 /* @flow strict-local */
 import { AppRegistry } from 'react-native';
 import ZulipMobile from './src/ZulipMobile';
+import SharingRoot from './src/sharing/SharingRoot';
 
 AppRegistry.registerComponent('ZulipMobile', () => ZulipMobile);
+AppRegistry.registerComponent('SharingRoot', () => SharingRoot);
diff --git a/src/boot/AppEventHandlers.js b/src/boot/AppEventHandlers.js
index 87575c0a6aa..4110ce9be75 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';
 
@@ -98,6 +99,7 @@ class AppEventHandlers extends PureComponent<Props> {
   };
 
   notificationListener = new NotificationListener(this.props.dispatch);
+  shareListener = new ShareReceivedListener(this.props.dispatch);
 
   handleMemoryWarning = () => {
     // Release memory here
@@ -106,7 +108,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);
     AppState.addEventListener('memoryWarning', this.handleMemoryWarning);
@@ -116,6 +118,7 @@ class AppEventHandlers extends PureComponent<Props> {
     // $FlowFixMe: libdef wrongly says callback's parameter is optional
     Orientation.addOrientationListener(this.handleOrientationChange);
     this.notificationListener.start();
+    this.shareListener.start();
   }
 
   componentWillUnmount() {
@@ -128,6 +131,7 @@ class AppEventHandlers extends PureComponent<Props> {
     // $FlowFixMe: libdef wrongly says callback's parameter is optional
     Orientation.removeOrientationListener(this.handleOrientationChange);
     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/nav/navReducer.js b/src/nav/navReducer.js
index 1a3a533031c..2118cc0b6d9 100644
--- a/src/nav/navReducer.js
+++ b/src/nav/navReducer.js
@@ -64,6 +64,11 @@ const rehydrate = (state, action) => {
     return getStateForRoute('loading');
   }
 
+  // Dont switch to main UI if sharing screen is on.
+  if (state.routes.find(route => route.routeName === 'sharing')) {
+    return state;
+  }
+
   // Great: we have an active, logged-in account, and server data for it.
   // Show the main UI.
   return getStateForRoute('main');
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/SharingRoot.js b/src/sharing/SharingRoot.js
new file mode 100644
index 00000000000..ac75183c1ba
--- /dev/null
+++ b/src/sharing/SharingRoot.js
@@ -0,0 +1,18 @@
+/* @flow strict-local */
+import React from 'react';
+import { View } from 'react-native';
+
+/**
+ * This is a dummy component to by-pass some weird quirks of Android Activity
+ * launches in a React Native context. The native code in
+ * `ReceiveShareActivity.kt` finishes this activity quickly, after either
+ * i) Sending events to an already open app in the background
+ * ii) Launching `MainActivity` with some initial share data.
+ */
+class SharingRoot extends React.Component<{||}> {
+  render() {
+    return <View />;
+  }
+}
+
+export default SharingRoot;
diff --git a/src/sharing/SharingScreen.js b/src/sharing/SharingScreen.js
new file mode 100644
index 00000000000..32439a7f7d8
--- /dev/null
+++ b/src/sharing/SharingScreen.js
@@ -0,0 +1,472 @@
+/* @flow strict-local */
+import React, { PureComponent } from 'react';
+import { View, StyleSheet, Image, ScrollView, Modal, BackHandler } from 'react-native';
+import type { NavigationScreenProp } from 'react-navigation';
+import { createMaterialTopTabNavigator } from 'react-navigation';
+import { BRAND_COLOR } from '../styles/constants';
+import type { Dispatch, SharedData, Subscription, User, Auth } from '../types';
+import { connect } from '../react-redux';
+import { ZulipButton, Input, Label, Screen } from '../common';
+import UserItem from '../users/UserItem';
+import { getSubscriptionsById } from '../subscriptions/subscriptionSelectors';
+import StreamAutocomplete from '../autocomplete/StreamAutocomplete';
+import TopicAutocomplete from '../autocomplete/TopicAutocomplete';
+import AnimatedScaleComponent from '../animation/AnimatedScaleComponent';
+import ChooseRecipientsScreen from './ChooseRecipientsScreen';
+import { sendMessage, uploadFile } from '../api';
+import { streamNarrow } from '../utils/narrow';
+import { getAuth } from '../selectors';
+import { showToast } from '../utils/info';
+import { navigateBack } from '../nav/navActions';
+import { fetchTopicsForActiveStream } 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,
+  },
+  usersPreview: {
+    padding: 10,
+  },
+  sharingWith: {
+    fontSize: 16,
+    marginBottom: 10,
+  },
+  chooseButton: {
+    marginTop: 8,
+    marginBottom: 8,
+    width: '50%',
+    alignSelf: 'flex-end',
+  },
+  message: {
+    height: 70,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: 'whitesmoke',
+    padding: 5,
+  },
+});
+
+type ShareToStreamProps = $ReadOnly<{|
+  share: SharedData,
+  dispatch: Dispatch,
+  subscriptions: Map<number, Subscription>,
+  auth: Auth,
+|}>;
+
+type ShareToStreamState = $ReadOnly<{|
+  stream: string,
+  topic: string,
+  message: string,
+  isStreamFocused: boolean,
+  isTopicFocused: boolean,
+|}>;
+
+class ShareToStreamComponent extends React.Component<ShareToStreamProps, ShareToStreamState> {
+  state = {
+    stream: '',
+    topic: '',
+    message: this.props.share.sharedText || '',
+    isStreamFocused: false,
+    isTopicFocused: false,
+  };
+
+  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(fetchTopicsForActiveStream(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 });
+  };
+
+  finishShare = () => {
+    const { dispatch } = this.props;
+
+    dispatch(navigateBack());
+    BackHandler.exitApp();
+  };
+
+  isSendButtonEnabled = () => {
+    const { stream, topic, message } = this.state;
+    const { share } = this.props;
+
+    if (share.type !== 'text') {
+      return stream !== '' && topic !== '';
+    }
+
+    return stream !== '' && topic !== '' && message !== '';
+  };
+
+  handleSend = async () => {
+    const { topic, stream, message } = this.state;
+    let messageToSend = message;
+    const { auth, share } = this.props;
+
+    try {
+      showToast('Sending Message...');
+      if (share.type !== 'text') {
+        const url = share.type === 'image' ? share.sharedImageUrl : share.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();
+  };
+
+  render() {
+    const { share } = this.props;
+    const { stream, topic, message, isStreamFocused, isTopicFocused } = this.state;
+    const narrow = streamNarrow(stream);
+
+    return (
+      <>
+        <ScrollView style={styles.wrapper} keyboardShouldPersistTaps>
+          <View style={styles.container}>
+            {share.type === 'image' && (
+              <Image
+                source={{ uri: share.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"
+            disabled={!this.isSendButtonEnabled()}
+          />
+        </View>
+      </>
+    );
+  }
+}
+
+type ShareToPmProps = $ReadOnly<{|
+  share: SharedData,
+  dispatch: Dispatch,
+  auth: Auth,
+|}>;
+
+type ShareToPmState = $ReadOnly<{|
+  users: User[],
+  message: string,
+  choosingRecipients: boolean,
+|}>;
+
+class ShareToPmComponent extends React.Component<ShareToPmProps, ShareToPmState> {
+  constructor(props) {
+    super(props);
+    const { share } = props;
+    this.state = {
+      users: [],
+      message: share.type === 'text' ? share.sharedText : '',
+      choosingRecipients: false,
+    };
+  }
+
+  toggleChoosingRecipients = () => {
+    this.setState(state => ({ choosingRecipients: !state.choosingRecipients }));
+  };
+
+  handleChooseRecipients = (users: Array<User>) => {
+    this.setState({ users });
+    this.toggleChoosingRecipients();
+  };
+
+  finishShare = () => {
+    const { dispatch } = this.props;
+
+    dispatch(navigateBack());
+    BackHandler.exitApp();
+  };
+
+  handleMessageChange = message => {
+    this.setState({ message });
+  };
+
+  isSendButtonEnabled = () => {
+    const { message, users } = this.state;
+    const { share } = this.props;
+
+    if (share.type === 'text') {
+      return message !== '' && users.length > 0;
+    }
+
+    return users.length > 0;
+  };
+
+  getUsersPreview = () => {
+    const { users } = this.state;
+
+    if (users.length === 0) {
+      return <Label text="Please choose recipients to share with" />;
+    }
+    const preview = [];
+    users.forEach((user: User) => {
+      preview.push(
+        <UserItem
+          avatarUrl={user.avatar_url}
+          email={user.email}
+          fullName={user.full_name}
+          onPress={() => {}}
+        />,
+      );
+    });
+    return preview;
+  };
+
+  handleSend = async () => {
+    const { users, message } = this.state;
+    let messageToSend = message;
+    const { auth, share } = this.props;
+    const to = JSON.stringify(users.map(user => user.user_id));
+
+    try {
+      showToast('Sending Message...');
+
+      if (share.type === 'image' || share.type === 'file') {
+        const url = share.type === 'image' ? share.sharedImageUrl : share.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();
+  };
+
+  render() {
+    const { message, choosingRecipients } = this.state;
+
+    if (choosingRecipients) {
+      return (
+        <Modal>
+          <ChooseRecipientsScreen onComplete={this.handleChooseRecipients} />
+        </Modal>
+      );
+    }
+
+    const { share } = this.props;
+    let sharePreview = null;
+    if (share.type === 'image') {
+      sharePreview = (
+        <Image
+          source={{ uri: share.sharedImageUrl }}
+          width={200}
+          height={200}
+          style={styles.imagePreview}
+        />
+      );
+    }
+
+    return (
+      <>
+        <ScrollView style={styles.wrapper} keyboardShouldPersistTaps>
+          <View style={styles.container}>{sharePreview}</View>
+          <View style={styles.usersPreview}>{this.getUsersPreview()}</View>
+          <ZulipButton
+            onPress={this.toggleChoosingRecipients}
+            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"
+            disabled={!this.isSendButtonEnabled()}
+          />
+        </View>
+      </>
+    );
+  }
+}
+
+const ShareToPm = connect(state => ({
+  auth: getAuth(state),
+}))(ShareToPmComponent);
+
+const ShareToStream = connect(state => ({
+  subscriptions: getSubscriptionsById(state),
+  auth: getAuth(state),
+}))(ShareToStreamComponent);
+
+type Props = $ReadOnly<{|
+  navigation: NavigationScreenProp<{ params: {| sharedData: SharedData |} }>,
+  dispatch: Dispatch,
+|}>;
+
+class SharingScreen extends PureComponent<Props> {
+  Tabs;
+
+  constructor(props) {
+    super(props);
+    const { navigation } = this.props;
+    const share: SharedData = navigation.state.params.sharedData;
+
+    this.Tabs = createMaterialTopTabNavigator(
+      {
+        Stream: {
+          screen: () => <ShareToStream share={share} />,
+        },
+        'Private Message': {
+          screen: () => <ShareToPm share={share} />,
+        },
+      },
+      {
+        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,
+          },
+        },
+      },
+    );
+  }
+
+  render() {
+    const { Tabs } = this;
+
+    return (
+      <Screen canGoBack={false} title="Share on Zulip" shouldShowLoadingBanner={false}>
+        <Tabs />
+      </Screen>
+    );
+  }
+}
+
+export default connect()(SharingScreen);
diff --git a/src/sharing/index.js b/src/sharing/index.js
new file mode 100644
index 00000000000..a967159601f
--- /dev/null
+++ b/src/sharing/index.js
@@ -0,0 +1,57 @@
+/* @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 handleReceivedData = async (data: SharedData, dispatch: Dispatch) => {
+  dispatch(navigateToSharing(data));
+};
+
+export const handleInitialShare = async (dispatch: Dispatch) => {
+  const initialSharedData: SharedData | null = await Sharing.getInitialSharedContent();
+  if (initialSharedData !== null) {
+    handleReceivedData(initialSharedData, dispatch);
+  }
+};
+
+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) => {
+    handleReceivedData(data, this.dispatch);
+  };
+
+  /** 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..8ab6bd9d688 100644
--- a/src/types.js
+++ b/src/types.js
@@ -324,3 +324,20 @@ 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,
+|};
+
+export type SharedData = SharedText | SharedImage | SharedFile;
diff --git a/static/translations/messages_en.json b/static/translations/messages_en.json
index 9a72ea45ebf..a4e06734539 100644
--- a/static/translations/messages_en.json
+++ b/static/translations/messages_en.json
@@ -211,5 +211,13 @@
   "🚌 Commuting": "🚌 Commuting",
   "🤒 Out sick": "🤒 Out sick",
   "🌴 Vacationing": "🌴 Vacationing",
-  "🏠 Working remotely": "🏠 Working remotely"
+  "🏠 Working remotely": "🏠 Working remotely",
+  "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"
+
 }