title: How to share an image to Instagram Stories from Expo / React Native
body: <p>How do I share an image directly to an Instagram story using Expo / React Native?</p>
  
  <p>This issue has already <a href="https://stackoverflow.com/a/44600809/7869175">been solved</a> for iOS for normal Instagram posts, but not stories.</p>
  
  <p>Facebook's <a href="https://developers.facebook.com/docs/instagram/sharing-to-stories/" rel="nofollow noreferrer">docs</a> explain how to do this for iOS and Android, but not React Native.</p>
  
  <h2>Expected behavior:</h2>
  
  <p>Open Instagram story with the selected image.</p>
  
  <h2>Current behavior:</h2>
  
  <p>Opens Instagram story with blank screen.</p>
  
  <h2>The problem I'm facing:</h2>
  
  <p>I'm not quite sure how to generate a URI that fits Instagram's schema, as referenced in their <a href="https://developers.facebook.com/docs/instagram/sharing-to-stories/" rel="nofollow noreferrer">docs</a>.</p>
  
  <h2>Reproducible Snack</h2>
  
  <p><a href="https://snack.expo.io/@nandorojo/share-to-instagram-story" rel="nofollow noreferrer">https://snack.expo.io/@nandorojo/share-to-instagram-story</a></p>
  
  <p>Thank you so much!</p>
  
  <p>Here is my code from the snack above:</p>
  
  <pre><code>
  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 () =&gt; {
      // download to device
      const { uri } = await FileSystem.downloadAsync(
        url,
        `${FileSystem.documentDirectory}meme.jpg`
      ).catch(e =&gt; 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 (
        &lt;View style={styles.container}&gt;
          &lt;Image source={{ uri: url }} style={{ height: 100, width: 100 }} /&gt;
          &lt;Text style={styles.paragraph} onPress={this._shareToStory}&gt;
            Share to Instagram Story
          &lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#ecf0f1',
      padding: 8,
    },
    paragraph: {
      margin: 24,
      fontSize: 18,
      fontWeight: 'bold',
      textAlign: 'center',
    },
  });
  
  
  
  </code></pre>