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-remake

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-remake"
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/") && <Image source={{ uri: sharedData }} />}
115		</View>
116	)
117}
118
119AppRegistry.registerComponent("Test", () => Test)
120AppRegistry.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.