react-native-share-menu

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

Installation

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

Automatic Linking (React Native 0.60+)

At the command line, in the ios directory:

pod install

Manual Linking (React Native 0.36+)

At the command line, in the project directory:

react-native link

Android Instructions

iOS Instructions

Custom iOS Share View (optional)

API Docs

Example Project

Example Usage

importReact,{useState,useEffect,useCallback}from"react";import{AppRegistry,Text,View,Image,Button}from"react-native";importShareMenu,{ShareMenuReactView}from"react-native-share-menu";typeSharedItem={mimeType: string,data: string,extraData: any,};constTest=()=>{const[sharedData,setSharedData]=useState(null);const[sharedMimeType,setSharedMimeType]=useState(null);consthandleShare=useCallback((item: ?SharedItem)=>{if(!item){return;}const{ mimeType, data, extraData }=item;setSharedData(data);setSharedMimeType(mimeType);// You can receive extra data from your custom Share Viewconsole.log(extraData);},[]);useEffect(()=>{ShareMenu.getInitialShare(handleShare);},[]);useEffect(()=>{constlistener=ShareMenu.addNewShareListener(handleShare);return()=>{listener.remove();};},[]);if(!sharedMimeType&&!sharedData){// The user hasn't shared anything yetreturnnull;}if(sharedMimeType==="text/plain"){// The user shared textreturn<Text>Shared text: {sharedData}</Text>;}if(sharedMimeType.startsWith("image/")){// The user shared an imagereturn(<View><Text>Shared image:</Text><Imagesource={{uri: sharedData}}/></View>);}// The user shared a file in generalreturn(<View><Text>Shared mime type: {sharedMimeType}</Text><Text>Shared file location: {sharedData}</Text></View>);};constShare=()=>{const[sharedData,setSharedData]=useState("");const[sharedMimeType,setSharedMimeType]=useState("");useEffect(()=>{ShareMenuReactView.data().then(({ mimeType, data })=>{setSharedData(data);setSharedMimeType(mimeType);});},[]);return(<View><Buttontitle="Dismiss"onPress={()=>{ShareMenuReactView.dismissExtension();}}/><Buttontitle="Send"onPress={()=>{// Share something before dismissingShareMenuReactView.dismissExtension();}}/><Buttontitle="Dismiss with Error"onPress={()=>{ShareMenuReactView.dismissExtension("Something went wrong!");}}/><Buttontitle="Continue In App"onPress={()=>{ShareMenuReactView.continueInApp();}}/><Buttontitle="Continue In App With Extra Data"onPress={()=>{ShareMenuReactView.continueInApp({hello: "from the other side"});}}/>{sharedMimeType==="text/plain"&&<Text>{sharedData}</Text>}{sharedMimeType.startsWith("image/")&&(<Imagesource={{uri: sharedData}}/>)}</View>);};AppRegistry.registerComponent("Test",()=>Test);AppRegistry.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

• Between 2016 and 2023, sponsored by Meedan and created and developed by Caio Almeida
• iOS version supported by Gustavo Parreira