Installing

Expo Managed Workflow

For Expo projects, you will need to be on a managed workflow and use the following command:

npx expo install react-native-share

Configure you app.config.ts or app.json to use the permissions needed by the library:

{
  "plugins": [
    [
      "react-native-share",
      {
        "ios": [
          "fb",
          "instagram",
          "twitter",
          "tiktoksharesdk"
        ],
        "android": [
          "com.facebook.katana",
          "com.instagram.android",
          "com.twitter.android",
          "com.zhiliaoapp.musically"
        ]
      }
    ]
  ]
}

ios parameter will take care of adding queries (LSApplicationQueriesSchemes) to the Info.plist.

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fb</string>
  <string>instagram</string>
  <string>twitter</string>
  <string>tiktoksharesdk</string>
</array>

android parameter will take care of adding queries to the AndroidManifest.xml.

<queries>
  <package android:name="com.facebook.katana" />
  <package android:name="com.instagram.android" />
  <package android:name="com.twitter.android" />
  <package android:name="com.zhiliaoapp.musically" />
</queries>

And prebuild the project with expo prebuild.

Bare React Native

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.

Also, to use this library on iOS you will need:

XCode 11 or higher
iOS 13 SDK or higher

After that, you will see that the library is now available at your node_modules.

Note: Base64 attachments are prepared in app-specific cache storage. Android 4.4 (API 19) and later do not require storage permissions for these directories; do not request WRITE_EXTERNAL_STORAGE just to share base64 data. Reading a source file outside your app's storage may still require access granted by its provider. See app-specific storage.

Adding Queries for Android (Necessary for SDK >= 30)

Android 11 introduces changes related to package visibility. These changes affect apps only if they target Android 11. For more information on these changes, view the guides about package visibility on Android. This change can prevent you to use Share.shareSingle() or others!

In AndroidManifest.xml insert the <queries> tag.

<manifest package="com.example.game">
    <queries>
        <package android:name="com.example.store" />
        <package android:name="com.example.services" />

        <!--for example, to share via instagram -->
        <package android:name="com.instagram.android" />
    </queries>
    ...
</manifest>

Note: Don't forget to provide the name of the application you will be sharing your content through. See example above.

Manual Linking

If the auto-linking doesn't work for any reason, you can still run a:

react-native link react-native-share

Manual Install

iOS Install

yarn add react-native-share
In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-share ➜ ios and add RNShare.xcodeproj
In XCode, in the project navigator, select your project. Add libRNShare.a to your project's Build Phases ➜ Link Binary With Libraries
In XCode, in the project navigator, select your project. Add Social.framework and MessageUI.framework to your project's General ➜ Linked Frameworks and Libraries
Run your project (Cmd+R)
(Optional) LSApplicationQueriesSchemes

If you want to share Whatsapp, Mailto or some applications on iOS, you should write LSApplicationQueriesSchemes in info.plist:

  <key>LSApplicationQueriesSchemes</key>
  <array>
    <string>whatsapp</string>
    <string>mailto</string>
    <string>instagram</string>
    <string>instagram-stories</string>
    <string>fb</string>
    <string>facebook-stories</string>
  </array>

Android Install

yarn add react-native-share
Open up android/app/src/main/java/[...]/MainApplication.java
- Add import cl.json.RNSharePackage; and import cl.json.ShareApplication; to the imports at the top of the file
- Add new RNSharePackage() to the list returned by the getPackages() method

Append the following lines to android/settings.gradle:

include ':react-native-share'
project(':react-native-share').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-share/android')

Insert the following lines inside the dependencies block in android/app/build.gradle:
```
  implementation project(':react-native-share')
```
(Optional) Follow this for implementing Provider

Windows Install

The included Windows implementation uses a legacy callback-based native open method, while the current JavaScript API expects a promise. Windows compatibility needs validation before use; the former C# RNSharePackage instructions do not match the included C++/WinRT package provider. Android and iOS installation steps above do not establish Windows support.

Adding your implementation of FileProvider

Follow this to implement your FileProvider. If you have any doubt please you found more about that here

applicationId should be defined in the defaultConfig section in your android/app/build.gradle:

File: android/app/build.gradle

defaultConfig {
    applicationId "com.yourcompany.yourappname"
    ...
}

Add this <provider> section to your AndroidManifest.xml

File: AndroidManifest.xml

<application>
    <provider
        android:name="androidx.core.content.FileProvider"
        android:authorities="${applicationId}.provider"
        android:grantUriPermissions="true"
        android:exported="false">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/filepaths" />
    </provider>
</application>

Create a filepaths.xml under this directory: android/app/src/main/res/xml.

In this file, add the following contents:

File: android/app/src/main/res/xml/filepaths.xml

<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
  <external-cache-path name="myexternalimages" path="Download/" />
</paths>

Edit your MainApplication.java class to add implements ShareApplication and getFileProviderAuthority
The getFileProviderAuthority function returns the android:authorities value added in the AndroidManifest.xml file

applicationId is defined in the defaultConfig section of your android/app/build.gradle and referenced using BuildConfig.APPLICATION_ID

import cl.json.ShareApplication
public class MainApplication extends Application implements ShareApplication, ReactApplication {

     @Override
     public String getFileProviderAuthority() {
            return BuildConfig.APPLICATION_ID + ".provider";
     }

     // ...Your own code

}

Older versions

If you need to use a older version of react-native < 0.60, then you will need to run a:

yarn add react-native-share@version

Or with npm:

npm i react-native-share@version --save

You can look at all versions, that we published here.

react-native 0.59.10

If you can't update your project to the most recent version of both react-native and react-native-share, please use 1.2.1. Alternatively you can use jetifier running a npx jetify -r.

Expo Managed Workflow​

Bare React Native​

Adding Queries for Android (Necessary for SDK >= 30)​

Manual Linking​

Manual Install​

iOS Install​

Android Install​

Windows Install​

Adding your implementation of FileProvider​

Older versions​

react-native 0.59.10​