react-native-share-menu

Add your app as a target for sharing from other apps and write iOS Share Extensions in React Native.

Installation

1npm i --save react-native-share-menu

Automatic Linking (React Native 0.60+)

At the command line, in the ios directory:

1pod install

Manual Linking (React Native 0.36+)

At the command line, in the project directory:

1react-native link

Android Instructions

iOS Instructions

Custom iOS Share View (optional)

API Docs

Example Project

Example Usage

1import React, { useState, useEffect, useCallback } from "react";
2import { AppRegistry, Text, View, Image, Button } from "react-native";
3import ShareMenu, { ShareMenuReactView } from "react-native-share-menu";
4
5type SharedItem = {
6  mimeType: string,
7  data: string,
8  extraData: any,
9};
10
11const Test = () => {
12  const [sharedData, setSharedData] = useState(null);
13  const [sharedMimeType, setSharedMimeType] = useState(null);
14
15  const handleShare = useCallback((item: ?SharedItem) => {
16    if (!item) {
17      return;
18    }
19
20    const { mimeType, data, extraData } = item;
21
22    setSharedData(data);
23    setSharedMimeType(mimeType);
24    // You can receive extra data from your custom Share View
25    console.log(extraData);
26  }, []);
27
28  useEffect(() => {
29    ShareMenu.getInitialShare(handleShare);
30  }, []);
31
32  useEffect(() => {
33    const listener = ShareMenu.addNewShareListener(handleShare);
34
35    return () => {
36      listener.remove();
37    };
38  }, []);
39
40  if (!sharedMimeType && !sharedData) {
41    // The user hasn't shared anything yet
42    return null;
43  }
44
45  if (sharedMimeType === "text/plain") {
46    // The user shared text
47    return <Text>Shared text: {sharedData}</Text>;
48  }
49
50  if (sharedMimeType.startsWith("image/")) {
51    // The user shared an image
52    return (
53      <View>
54        <Text>Shared image:</Text>
55        <Image source={{ uri: sharedData }} />
56      </View>
57    );
58  }
59
60  // The user shared a file in general
61  return (
62    <View>
63      <Text>Shared mime type: {sharedMimeType}</Text>
64      <Text>Shared file location: {sharedData}</Text>
65    </View>
66  );
67};
68
69const Share = () => {
70  const [sharedData, setSharedData] = useState("");
71  const [sharedMimeType, setSharedMimeType] = useState("");
72
73  useEffect(() => {
74    ShareMenuReactView.data().then(({ mimeType, data }) => {
75      setSharedData(data);
76      setSharedMimeType(mimeType);
77    });
78  }, []);
79
80  return (
81    <View>
82      <Button
83        title="Dismiss"
84        onPress={() => {
85          ShareMenuReactView.dismissExtension();
86        }}
87      />
88      <Button
89        title="Send"
90        onPress={() => {
91          // Share something before dismissing
92          ShareMenuReactView.dismissExtension();
93        }}
94      />
95      <Button
96        title="Dismiss with Error"
97        onPress={() => {
98          ShareMenuReactView.dismissExtension("Something went wrong!");
99        }}
100      />
101      <Button
102        title="Continue In App"
103        onPress={() => {
104          ShareMenuReactView.continueInApp();
105        }}
106      />
107      <Button
108        title="Continue In App With Extra Data"
109        onPress={() => {
110          ShareMenuReactView.continueInApp({ hello: "from the other side" });
111        }}
112      />
113      {sharedMimeType === "text/plain" && <Text>{sharedData}</Text>}
114      {sharedMimeType.startsWith("image/") && (
115        <Image source={{ uri: sharedData }} />
116      )}
117    </View>
118  );
119};
120
121AppRegistry.registerComponent("Test", () => Test);
122AppRegistry.registerComponent("ShareMenuModuleComponent", () => Share);

Or check the "example" directory for an example application.

How it looks

Android

iOS

Releasing a new version

$ npm version <minor|major|patch> && npm publish

Credits

Sponsored and developed by Meedan.

iOS version maintained by Gustavo Parreira.