DEV Community

Cover image for A Step-by-Step Guide to Share images from Your Expo React Native App to Instagram Stories
Vikrant Bhat
Vikrant Bhat

Posted on β€’ Originally published at vikrantbhat.hashnode.dev

1

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

Let's get started with this step-by-step guide to share images from your Expo React Native App to Instagram Stories! With this guide, you will be able to easily install the necessary libraries - react-native-view-shot and react-native-share - and create a component with the example code. I also share some tips for debugging if you get stuck and a few resources to help you out. So, let's get started!

Steps

Step 1: Create an expo app or open an existing expo-managed app

npx create-expo-app my-app && cd my-app
Enter fullscreen mode Exit fullscreen mode

Step 2: Install the following mentioned libraries:

  1. react-native-view-shot - to capture a React Native View as an image.

  2. react-native-share - to share the captured image as a sticker to your Instagram stories.

Step 3: Copy the following example code as a component

Ps: I've tried to explain as much as I can within the code snippet below, if there are still any questions, please feel free to ask!

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;
Enter fullscreen mode Exit fullscreen mode

Note: for testing react-native-share's functionality in your expo managed app, you will have to make use of Expo development builds.

Tips for debugging if stuck

  1. APIs from various packages and Instagram are ever-changing, hence if you are stuck, I would highly recommend to go and search in their GitHub issues and PRs tab, it's very likely that someone has already faced it. I would also be happy to help you out if that doesn't work out πŸ˜‡

  2. Make sure that you test on both IOS and Android devices before releasing as there might be some things that don't work across platforms and you might need to handle them.

Resources

  1. Sharing to Stories - Facebook docs for sharing from apps to stories, it does not have anything specific to react-native or expo, but it's a must-read to understand the API and values it accepts.

  2. Create an image from a React Native component and share it on social media - This video is a little old but it gives you a good idea of the problem and the solution.

  3. What are development builds and how to set them up - comprehensive, complete, and up-to-date docs from the expo team. [Video alternative]

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
πŸŽ₯ Audio/video file upload with real-time preview
πŸ—£οΈ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
πŸ“€ Export interview's subtitles in VTT format

Read full post

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay