Skip to main content

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: If your application requires the ability to share base64 files on Android, you need to add

<!-- required for react-native-share base64 sharing -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

to your application's AndroidManifest.xml file as per the example project.

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​

  1. yarn add react-native-share
  2. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
  3. Go to node_modules ➜ react-native-share ➜ ios and add RNShare.xcodeproj
  4. In XCode, in the project navigator, select your project. Add libRNShare.a to your project's Build Phases ➜ Link Binary With Libraries
  5. In XCode, in the project navigator, select your project. Add Social.framework and MessageUI.framework to your project's General ➜ Linked Frameworks and Libraries
  6. Run your project (Cmd+R)
  7. (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​

  1. yarn add react-native-share

  2. 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

  3. 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')

  4. Insert the following lines inside the dependencies block in android/app/build.gradle:

      implementation project(':react-native-share')

  5. (Optional) Follow this for implementing Provider

Windows Install​

Read it! :D

  1. yarn add react-native-share
  2. In Visual Studio add the RNShare.sln in node_modules/react-native-share/windows/RNShare.sln folder to their solution, reference from their app.
  3. Open up your MainPage.cs app
  • Add using Cl.Json.RNShare; to the usings at the top of the file
  • Add new RNSharePackage() to the List<IReactPackage> returned by the Packages method

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.