How do I share content from a React Native app, including to Instagram Stories?

If you’re adding a share button to a React Native app, how much work it takes depends on what you’re sharing and where it’s going. A link or a line of text needs nothing extra, and a photo just needs to be a file on the phone. Sharing straight into Instagram Stories is the one that takes setup, because it needs a library, a native build, and an app ID from Meta.

Which one to use

• Text and links: React Native’s built-in Share, which opens the phone’s share sheet and works in Expo Go.
• Photos and other files: expo-sharing, which is part of the Expo SDK and also works in Expo Go. On iOS and Android it shares a local file. On the web it can’t share local files, so you’d share a link to an uploaded copy instead.
• One specific app, such as Instagram Stories: react-native-share, whose shareSingle opens that app directly. It includes native code that isn’t in Expo Go, so you’ll need a development build.

How to share a link or text

import { Share } from "react-native";

async function sharePost(title: string, link: string) {
  await Share.share({ message: `${title} ${link}` });
}

We’d put the link inside message, because that works on both platforms, while the separate url field is iOS only and title is Android only. On iOS, the result tells you whether the user shared or dismissed the sheet. On Android, the result is always Share.sharedAction, so you can’t tell whether they actually shared.

How to share a photo or file

import * as Sharing from "expo-sharing";

async function sharePhoto(fileUri: string) {
  if (await Sharing.isAvailableAsync()) {
    await Sharing.shareAsync(fileUri, { mimeType: "image/jpeg", dialogTitle: "Share photo" });
  }
}

fileUri has to point at a file on the device, so if the image lives on a server, download it with expo-file-system first. mimeType only applies on Android, and the iOS equivalent is UTI.

How to share to Instagram Stories

1. Get a Facebook App ID by creating an app in Meta for Developers. Sharing to Instagram Stories has required one since January 2023, and without it the user sees “The app you shared from doesn’t currently support sharing to Stories”.

2. Install react-native-share and add its config plugin to app.json. The ios list adds instagram-stories to LSApplicationQueriesSchemes, the list of other apps’ link schemes your app is allowed to check for on iOS:

   {
     "expo": {
       "plugins": [
         [
           "react-native-share",
           { "ios": ["instagram", "instagram-stories"], "android": ["com.instagram.android"] }
         ]
       ]
     }
   }

   Install it with npx expo install react-native-share.

3. Make a new development build, since the plugin changes native settings.

4. Share the image as a story:

   import Share from "react-native-share";
   
   await Share.shareSingle({
     social: Share.Social.INSTAGRAM_STORIES,
     appId: "YOUR_FACEBOOK_APP_ID",
     backgroundImage: imageUri,
   });

   You can also pass stickerImage, which can also be a base64 data: URI, along with backgroundTopColor and backgroundBottomColor.

How you know it works

On a real phone with Instagram installed and signed in, tapping the button opens Instagram on the story editor with your image in place. The other share buttons open the share sheet with your text or photo.

If it doesn’t open Instagram

If nothing happens on iOS, check that instagram-stories is in the plugin’s ios list and that you rebuilt afterward. If Instagram opens and shows the “doesn’t currently support sharing to Stories” message, the appId is missing or isn’t a valid Facebook App ID. Some share options also don’t appear or work in the iOS simulator, so test on a real device.