react-native-share

What is react-native-share?

The react-native-share package allows you to share content such as text, images, and files from your React Native app to other apps on the user's device. It supports both Android and iOS platforms.

What are react-native-share's main functionalities?

Share Text

This feature allows you to share plain text messages. The code sample demonstrates how to share a simple text message using the react-native-share package.

import Share from 'react-native-share';

const shareText = async () => {
  const shareOptions = {
    message: 'Hello, this is a text message!',
  };
  try {
    await Share.open(shareOptions);
  } catch (error) {
    console.log('Error =>', error);
  }
};

Share Image

This feature allows you to share images. The code sample demonstrates how to share an image using a base64 encoded string.

import Share from 'react-native-share';

const shareImage = async () => {
  const shareOptions = {
    url: 'data:image/png;base64,<base64_encoded_image>',
  };
  try {
    await Share.open(shareOptions);
  } catch (error) {
    console.log('Error =>', error);
  }
};

Share File

This feature allows you to share files. The code sample demonstrates how to share a file from a given file path.

import Share from 'react-native-share';

const shareFile = async () => {
  const shareOptions = {
    url: 'file://path/to/your/file.pdf',
  };
  try {
    await Share.open(shareOptions);
  } catch (error) {
    console.log('Error =>', error);
  }
};

Share with Social Media

This feature allows you to share content directly to specific social media apps. The code sample demonstrates how to share a message directly to WhatsApp.

import Share from 'react-native-share';

const shareToWhatsApp = async () => {
  const shareOptions = {
    message: 'Hello, sharing this via WhatsApp!',
    social: Share.Social.WHATSAPP,
  };
  try {
    await Share.shareSingle(shareOptions);
  } catch (error) {
    console.log('Error =>', error);
  }
};

Other packages similar to react-native-share

react-native-social-share

The react-native-social-share package allows you to share content to social media platforms like Facebook, Twitter, and WhatsApp. It is more focused on social media sharing compared to react-native-share, which offers a broader range of sharing options.

react-native-share-menu

The react-native-share-menu package allows your app to receive content shared from other apps. While react-native-share focuses on sharing content from your app, react-native-share-menu is designed to handle incoming shared content.

expo-sharing

The expo-sharing package is part of the Expo ecosystem and allows you to share files with other apps. It is simpler to use within Expo-managed projects but may not offer as many customization options as react-native-share.

README

react-native-share

React Native Share, a simple tool for share message and file to other apps.

Sponsors

---

If you use this library on your commercial/personal projects, you can help us by funding the work on specific issues that you choose by using IssueHunt.io!

This gives you the power to prioritize our work and support the project contributors. Moreover it'll guarantee the project will be updated and maintained in the long run.

Getting started 🚀

---

If you are using react-native >= 0.60 you just need to do a simple:

yarn add react-native-share

Or if are using npm:

npm i react-native-share --save

After that, we need to install the dependencies to use the project on iOS(you can skip this part, if you are using this on Android).

Now run a simple: npx pod-install or cd ios && pod install. After that, you should be able to use the library on both Platforms, iOS and Android.

Then simply import:

import Share from 'react-native-share';

Share.open(options)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    err && console.log(err);
  });

Which you do something similar to this:

Documentation

If you are using a older version of react-native or react-native-share, having any problem or want to know how use Share.open and other functions, please refer to our new docs and help us improve that. 🚀