Need Help: Unable to Share on Instagram Stories in React Native App, Works Fine on Other Platforms

GustavoMorais
January 14, 2024
186 views
0 votes
2 Answers

Hey fellow developers,

I’m currently working on a React Native app, and I’m facing an issue with sharing content on Instagram Stories. The sharing feature works perfectly on other platforms, but when it comes to Instagram Stories on iOS, it simply doesn’t function as expected.

Here’s a brief overview of the situation:

Problem:

The sharing functionality in my React Native app is successful on various platforms, including Android.
However, when attempting to share on Instagram Stories on iOS, it doesn’t work as intended.
Code Overview:

I’m using Expo and the Sharing module to handle the sharing functionality.
The code is set up to use the instagram-stories://share scheme for Instagram Stories on iOS.
Despite trying multiple approaches and consulting the Expo and Instagram API documentation, the issue persists.

What I’ve Tried:

Dynamically constructing the Instagram Stories URL using Expo and standard URL building practices.
Checking if the Instagram app is installed before attempting to open it.
Adjusting the image format and MIME type to ensure compatibility.
Request for Assistance:
If anyone has encountered a similar issue or has expertise in working with Instagram Stories sharing in React Native, your insights would be greatly appreciated. I’m open to suggestions, debugging tips, or alternative approaches to achieve successful sharing on Instagram Stories.

Thanks in advance for your help!

https://vimeo.com/902378130?share=copy
This is a link to observe the error occurring on an iOS

Answers

try

import Share from 'react-native-share';

const shareOptions = {
    backgroundImage: 'http://urlto.png',
    stickerImage: 'data:image/png;base64,<imageInBase64>', //or you can use "data:" link
    backgroundBottomColor: '#fefefe',
    backgroundTopColor: '#906df4',
    attributionURL: 'http://deep-link-to-app', //in beta
    social: Share.Social.INSTAGRAM_STORIES,
    appId: 'your_fb_app_id' // required since  Jan 2023 (see: https://developers.facebook.com/docs/instagram/sharing-to-stories/#sharing-to-stories)
};

Share.shareSingle(shareOptions);

courtesy: react-native-share