react-native-share

To share images to Instagram on iOS, you must request photo library permissions.

1. Add permissions to Info.plist:

<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires access to the photo library to save and share images on Instagram.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>This app requires access to the photo library to save and share images on Instagram.</string>

2. If using Expo, add to app.json / app.config.ts:

expo: {
    ios: {
        infoPlist: {
            NSPhotoLibraryUsageDescription: 'This app requires access to the photo library to save and share images on Instagram',
            NSPhotoLibraryAddUsageDescription: 'This app requires access to the photo library to save and share images on Instagram.',
        },
    }
}

Usage:

import Share, { Social } from 'react-native-share'

await Share.shareSingle({
      social: Share.Social.INSTAGRAM,
      url: 'data:image/png;base64,<imageInBase64>',
      type: 'image/*'
    });

To share content to Instagram Stories using Share.Social.INSTAGRAM_STORIES, you must provide a appId (Facebook App ID), which has been required since January 2023.

Supported options for INSTAGRAM_STORIES:

• appId (string, required): Facebook app ID.
• backgroundImage (string): URL of the background image.
• stickerImage (string): URL or base64 data of the sticker image.
• backgroundBottomColor (string): Bottom color (default #837DF4).
• backgroundTopColor (string): Top color (default #906df4).
• attributionURL (string): Facebook beta-test URL.
• backgroundVideo (string): URL of the video.
• linkUrl (string): URL to be used as a link in the shared content.
• linkText (string): Text to be used as a link in the shared content.

import Share from 'react-native-share';

const shareOptions = {
    backgroundImage: 'http://urlto.png',
    stickerImage: 'data:image/png;base64,<imageInBase64>', //or you can use "data:" link
    backgroundBottomColor: '#fefefe',
    backgroundTopColor: '#906df4',
    attributionURL: 'http://deep-link-to-app',
    social: Share.Social.INSTAGRAM_STORIES,
    appId: 'your_fb_app_id' // required since Jan 2023
};

Share.shareSingle(shareOptions);Fragile

On Android, you can share remote PDF files by downloading them via RNFetchBlob, converting the content to a base64 string, and passing that string to Share.open.

Steps:

1. Fetch the file using RNFetchBlob with fileCache: true.
2. Convert the response to base64.
3. Prepend the data URI scheme: data:${type};base64,.
4. Call Share.open with the base64 URL.
5. Clean up the cached file using RNFS.unlink.

static sharePDFWithAndroid(fileUrl, type) {
  let filePath = null;
  let file_url_length = fileUrl.length;
  const configOptions = { fileCache: true };
  RNFetchBlob.config(configOptions)
    .fetch('GET', fileUrl)
    .then(resp => {
      filePath = resp.path();
      return resp.readFile('base64');
    })
    .then(async base64Data => {
      base64Data = `data:${type};base64,` + base64Data;
      await Share.open({ url: base64Data });
      // remove the image or pdf from device's storage
      await RNFS.unlink(filePath);
    });
}

On iOS, sharing PDF files via base64 can fail in apps like WhatsApp or result in incorrect file extensions (e.g., .dat) in Gmail. To resolve this, download the remote file to the device's temporary storage first and share the local file path instead of the base64 string.

Requirements:

1. Install react-native-fetch-blob.
2. Configure RNFetchBlob with a specific path including the correct extension.
3. Use RNFS.unlink to clean up the downloaded file after sharing.

static sharePDFWithIOS(fileUrl, type) {
  let filePath = null;
  let file_url_length = fileUrl.length;
  const configOptions = {
    fileCache: true,
    path:
      DIRS.DocumentDir + (type === 'application/pdf' ? '/SomeFileName.pdf' : '/SomeFileName.png') // no difference when using jpeg / jpg / png /
  };
  RNFetchBlob.config(configOptions)
    .fetch('GET', fileUrl)
    .then(async resp => {
      filePath = resp.path();
      let options = {
        type: type,
        url: filePath // (Platform.OS === 'android' ? 'file://' + filePath)
      };
      await Share.open(options);
      // remove the image or pdf from device's storage
      await RNFS.unlink(filePath);
    });
}