How to share an image to Instagram Stories from Expo / React Native

Question

How do I share an image directly to an Instagram story using Expo / React Native?

This issue has already been solved for iOS for normal Instagram posts, but not stories.

Facebook's docs explain how to do this for iOS and Android, but not React Native.

Expected behavior:

Open Instagram story with the selected image.

Current behavior:

Opens Instagram story with blank screen.

The problem I'm facing:

I'm not quite sure how to generate a URI that fits Instagram's schema, as referenced in their docs .

Reproducible Snack

https://snack.expo.io/@nandorojo/share-to-instagram-story

Thank you so much!

Here is my code from the snack above:

import * as React from 'react';
import { Text, View, StyleSheet, Linking, Image } from 'react-native';
import * as FileSystem from 'expo-file-system';

const url = 'https://source.unsplash.com/daily';

export default class App extends React.Component {
  _shareToStory = async () => {
    // download to device
    const { uri } = await FileSystem.downloadAsync(
      url,
      `${FileSystem.documentDirectory}meme.jpg`
    ).catch(e => console.log('instagram share failed', JSON.stringify(e), url));

    try {
      const encodedUrl = encodeURIComponent(uri);
      const instagramUrl = `instagram-stories://share?backgroundImage=${encodedUrl}`;
      Linking.openURL(instagramUrl);
    } catch (error) {
      console.log(error);
    }
  };
  render() {
    return (
      <View style={styles.container}>
        <Image source={{ uri: url }} style={{ height: 100, width: 100 }} />
        <Text style={styles.paragraph} onPress={this._shareToStory}>
          Share to Instagram Story
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Answer 1

If you're using Expo Managed Workflow, your options are very limited. As of SDK v38, afaik it's only possible to accomplish this on Android , and only if you're sharing a background image (due to missing Expo APIs for content permissions and pasteboard), then something like this might work:

import * as FileSystem from 'expo-file-system'
import * as IntentLaucher from 'expo-intent-launcher'

// url of the file to share
const url = '....'

// some random temporary filename
const localFile = `${FileSystem.cacheDirectory}${uuid()}.jpg`

try {
  FileSystem.downloadAsync(url, localFile)
    .then(({ uri }) => {
      FileSystem.getContentUriAsync(uri).then(contentUri => {
        IntentLauncher.startActivityAsync(
          'com.instagram.share.ADD_TO_STORY',
          {
            data: contentUri,
            flags: 1, // FLAG_GRANT_READ_URI_PERMISSION
            type: 'image/jpeg', // or other based on your file type
          }
        ).catch(console.warn)
      })
    })
    .catch(console.warn)
} finally {
  FileSystem.deleteAsync(localFile).catch(console.warn)
}

However, if you're using React Native (or have ejected to Expo Bare Workflow), then you have more options. I'd recommend using the RN community supported react-native-share library that works on both Android and iOS and supports all of the sharing options (plus many other services):

import Share from 'react-native-share'

Share.shareSingle({
  method: Share.InstagramStories.SHARE_BACKGROUND_IMAGE,
  backgroundImage: '....' // url of the file to share
  social: Share.Social.INSTAGRAM_STORIES,
})