react-native-share-menu


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

Installation

``bash
npm i --save react-native-share-menu
`

$3

At the command line, in the ios directory:

`bash
pod install
`

$3

At the command line, in the project directory:

`bash
react-native link
`

Android Instructions

iOS Instructions

Custom iOS Share View (optional)

API Docs

Example Project

$3

`javascript
import React, { useState, useEffect, useCallback } from "react";
import { AppRegistry, Text, View, Image, Button } from "react-native";
import ShareMenu, { ShareMenuReactView } from "react-native-share-menu";

type SharedItem = {
mimeType: string,
data: string,
extraData: any,
};

const Test = () => {
const [sharedData, setSharedData] = useState(null);
const [sharedMimeType, setSharedMimeType] = useState(null);

const handleShare = useCallback((item: ?SharedItem) => {
if (!item) {
return;
}

const { mimeType, data, extraData } = item;

setSharedData(data);
setSharedMimeType(mimeType);
// You can receive extra data from your custom Share View
console.log(extraData);
}, []);

useEffect(() => {
ShareMenu.getInitialShare(handleShare);
}, []);

useEffect(() => {
const listener = ShareMenu.addNewShareListener(handleShare);

return () => {
listener.remove();
};
}, []);

if (!sharedMimeType && !sharedData) {
// The user hasn't shared anything yet
return null;
}

if (sharedMimeType === "text/plain") {
// The user shared text
return Shared text: {sharedData};
}

if (sharedMimeType.startsWith("image/")) {
// The user shared an image
return (

Shared image:


);
}

// The user shared a file in general
return (

Shared mime type: {sharedMimeType}
Shared file location: {sharedData}

);
};

const Share = () => {
const [sharedData, setSharedData] = useState("");
const [sharedMimeType, setSharedMimeType] = useState("");

useEffect(() => {
ShareMenuReactView.data().then(({ mimeType, data }) => {
setSharedData(data);
setSharedMimeType(mimeType);
});
}, []);

return (

title="Dismiss"
onPress={() => {
ShareMenuReactView.dismissExtension();
}}
/>
title="Send"
onPress={() => {
// Share something before dismissing
ShareMenuReactView.dismissExtension();
}}
/>
title="Dismiss with Error"
onPress={() => {
ShareMenuReactView.dismissExtension("Something went wrong!");
}}
/>
title="Continue In App"
onPress={() => {
ShareMenuReactView.continueInApp();
}}
/>
title="Continue In App With Extra Data"
onPress={() => {
ShareMenuReactView.continueInApp({ hello: "from the other side" });
}}
/>
{sharedMimeType === "text/plain" && {sharedData}}
{sharedMimeType.startsWith("image/") && (

)}

);
};

AppRegistry.registerComponent("Test", () => Test);
AppRegistry.registerComponent("ShareMenuModuleComponent", () => Share);
`

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

How it looks

$3

$3

Releasing a new version

$ npm version && npm publish`

Credits

Sponsored and developed by Meedan.

iOS version maintained by Gustavo Parreira.