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

[nandorojo]

I just asked this on StackOverflow: How to share an image to Instagram Stories from Expo / React Native - Stack Overflow

---

Including the body of my question below:

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

Share To Instagram Story - Snack

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',
  },
});