A Step-by-Step Guide to Share images from Your Expo React Native App to Instagram Stories

npx create-expo-app my-app && cd my-app

import { useRef, useState, useEffect } from 'react';
import { Text, View, Button, Platform, Linking } from "react-native";
import { captureRef } from "react-native-view-shot";
import Share from "react-native-share";

const App = () => {
    const viewRef = useRef(null); // ref used to mark the View to be screenshotted 📸, check the returned JSX below

    const [hasInstagramInstalled, setHasInstagramInstalled] = useState(false); // State to track if Instagram is installed on user's device or not

    useEffect(() => {
        if (Platform.OS === "ios") {
// If platform is IOS then check if instagram is installed on the user's device using the `Linking.canOpenURL` API
          Linking.canOpenURL("instagram://").then((val) =>
            setHasInstagramInstalled(val),
          );
        } else {
// Else check on android device if instagram is installed in user's device using the `Share.isPackageInstalled` API
          Share.isPackageInstalled("com.instagram.android").then(
            ({ isInstalled }) => setHasInstagramInstalled(isInstalled),
          );
        }
    }, []);

    async function captureAndShare() {
        try {
          // Capture the screenshot of the element and store it into the uri variable
          const uri = await captureRef(viewRef, {
            format: "png",
            quality: 1,
          });

          if (hasInstagramInstalled) {
            await Share.shareSingle({
              appId: "", // Note: replace this with your own appId from facebook developer account, it won't work without it. (https://developers.facebook.com/docs/development/register/)
              stickerImage: uri,
              social: Share.Social.INSTAGRAM_STORIES,
              backgroundBottomColor: "#1D1D1D", // You can use any hexcode here and below
              backgroundTopColor: "#1D1D1D",
              backgroundImage: '...', // This field is optional like the other fields (except appId) and you have to put a base64 encoded image here if you want to use it!
            });
          } else {
            // If instagram is not installed in user's device then just share using the usual device specific bottomsheet (https://react-native-share.github.io/react-native-share/docs/share-open)
            await Share.open({ url: uri });
          }
        } catch (error) {
          console.error(error);
        }
      }    

    return (
            <>
                <View ref={viewRef}>
                    <Text style={{ color: "red" }}>Hello world!</Text>
                </View>

                <Button 
                   onPress={captureAndShare} 
                   title='Capture & Share'
                />
            </>
        )
}

export default App;