React Native Share

Introduction to React Native Share

This package, created and continually improved by open-source developers, enables the broad sharing of PDF files, audio files, and photos. Built-in features include sharing content immediately to Facebook feeds and Instagram stories. The entire package's documentation is available, and you can download a working sample to your mobile device by following the instructions below the headings of the article.

Inbuilt Share Package in React Native

Prerequisites

The following are the requirements for using react-native-share:

• Expo CLI or react native CLI.
• Node.js v12.0.0 or higher
• Run expo init <your_app_name> to setup an expo project

How to Implement React-native-share?

To implement React Native Share, you first need to install it. Simply perform the following command if you are using React Native >= 0.60:

Then, to use the project on iOS, we must install the necessary dependencies (you can skip this part if you are using this on Android).

Run either npx pod-install or cd ios && pod install at this point. Following that, you should be able to utilize the library on both the iOS and Android platforms.

Different Uses of React Native Share

Sharing a Link

Run npm start and then npm run os_name, for example, Android, to start the program after the package has been installed.

Let us now see a simple application that is sharing a link.

Let's understand what is going on. The React Native Share package is first imported, and then three sets of settings are defined:

A title, or the name of the shared activity that the app's operating system sends, an option to share the information with a message. The link we want to share is a URL.

Next, the options props are supplied to a share function that handles invoking the open method on the share. Afterwards, we give a button for this sharing feature to use.

Other share options are available if you test this on the emulator. We will use SMS as a sharing method. The SMS message and URL will be displayed when you choose this.

Run npm start and then npm run os_name, for example, android, to start the program after the package has been installed.

Let us now see a simple application that is sharing a link.

Media File Sharing

Let's try to share a photograph and a PDF document now. You must distribute media files in their base64-encoded format to share them. We have provided a base64.js file with an image and a PDF that has been base64-encoded as part of this tutorial.

Sharing to Specific Applications

We've barely begun to scratch the surface of what the React Native Sharing package is capable of. Depending on your use case, you can share straight to a particular application, such as WhatsApp. See how it works.

Underneath the initial share function generated, add this method.

Add the following code after the button at the end:

So let's analyze it. Accessible through the share package, the specificShare method accepts options comparable to those of the open method and additional characteristics. Following the whatsAppNumber, we pass the social media app we wish to use, and then the file we want to share.

Detecting Installed Apps for Sharing

We presumed that WhatsApp was installed on the user's device in the preceding code. Despite the possibility that this is accurate, given the volume of app downloads, we cannot assume this is the case.

What if we wanted to figure out if someone has an app installed? Fortunately, there is a useful function for that in the React Native Sharing package.

Using our WhatsApp example, let's examine how it works, but let's start by making sure the user has WhatsApp installed.

Modify the specificShare function:

Using the isPackageInstalled function and the program ID, we first determine whether WhatsApp is installed or not. This application ID needs to be legitimate for iOS or Android. The specificShare function is then called if it has been installed; else, we notify the user that WhatsApp has not been installed.

The isPackageInstalled function only works for Android. But, you may use Linking.canOpenURL(<app_schema>) to determine whether the app is installed on the user's iOS device.

Adding Share Button in React Native App

Step - 1:
Expo will be used to build the React native app. Use the terminal command listed below to install expo-cli.

Step - 2:
Use expo to create a react native project.

Step - 3:
Now go to the created project using the below command.

Including a Share Button: Using the Share API, you can quickly include a share button in your React native app. Add the following code to the App.js file to accomplish this.

Here, we're adding a share button to the app by using the share feature of the share module.

Run the application: Now, use the terminal command listed below to launch the application.

You can also use npm run android or npm run ios according to your emulator.

Output: