https://github.com/Expensify/react-native-share-menu

A module for React Native that adds your app to the share menu of the device
https://github.com/Expensify/react-native-share-menu

react-native share-intent

Last synced: 28 days ago
JSON representation

A module for React Native that adds your app to the share menu of the device

• Host: GitHub
• URL: https://github.com/Expensify/react-native-share-menu
• Owner: Expensify
• License: mit
• Created: 2016-03-14T03:12:34.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2024-03-16T21:47:32.000Z (3 months ago)
• Last Synced: 2024-05-13T19:29:15.729Z (about 1 month ago)
• Topics: react-native, share-intent
• Language: Swift
• Homepage:
• Size: 9.49 MB
• Stars: 605
• Watchers: 62
• Forks: 233
• Open Issues: 171
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-react-native-native-modules - react-native-share-menu ★74
• awesome-stars - react-native-share-menu

README

        
# react-native-share-menu

[![npm version](https://badge.fury.io/js/react-native-share-menu.svg)](https://www.npmjs.com/package/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

```

### Automatic Linking (React Native 0.60+)

At the command line, in the ios directory:

```bash

pod install

```

### Manual Linking (React Native 0.36+)

At the command line, in the project directory:

```bash

react-native link

```

## [Android Instructions](ANDROID_INSTRUCTIONS.md)

## [iOS Instructions](IOS_INSTRUCTIONS.md)

## [Custom iOS Share View (optional)](SHARE_EXTENSION_VIEW.md)

## [API Docs](API_DOCS.md)

## [Example Project](example/)

### Example Usage

```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 (

    

       {

          ShareMenuReactView.dismissExtension();

        }}

      />

       {

          // Share something before dismissing

          ShareMenuReactView.dismissExtension();

        }}

      />

       {

          ShareMenuReactView.dismissExtension("Something went wrong!");

        }}

      />

       {

          ShareMenuReactView.continueInApp();

        }}

      />

       {

          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

### Android

 

### iOS



## Releasing a new version

`$ npm version  && npm publish`

## Credits

* Between 2016 and 2023, sponsored by [Meedan](https://meedan.com) and created and developed by [Caio Almeida](https://ca.ios.ba)

* iOS version supported by [Gustavo Parreira](https://github.com/Gustash)