Android: can't share video to Instagram Story

[KostiantynSosonnyi]

Precondition

I found a way to provide images and videos to Instagram stories builder using base64 encoding (for Android only because for iOS it works fine just with file path or URL). Image publishing works well but it is impossible to publish a video using this method.

Android code example:

import RNFS from "react-native-fs"
import Share, { ShareSingleOptions } from "react-native-share"

const shareRemoteVideoToIGStories = (file: { source: string, name: string, type: string }) =>
  new Promise((resolve) => {
    const localFile = `${RNFS.DocumentDirectoryPath}/${file.name}`
    const options = {
      fromUrl: file.source,
      toFile: localFile,
    }
    RNFS.downloadFile(options).promise.then(() => {
      RNFS.readFile(localFile, "base64").then((base64) => {
        const cleanAndResolve = () => {
          RNFS.unlink(localFile).then(resolve)
        }
        const shareOptions: ShareSingleOptions = {
          social: Share.Social.INSTAGRAM_STORIES,
          backgroundVideo: `data:${file.type};base64,` + base64,
        }
        Share.shareSingle(shareOptions).then(cleanAndResolve).catch(cleanAndResolve)
      }).catch(resolve)
    }).catch(resolve)
  })

Steps to reproduce

1. Provide base64 encoded video to Instagram Story using react-native-share
2. Try to publish the story with provided video

Expected behaviour

Video is published properly

Actual behaviour

Video fails to be uploaded

Also, the error shows up when trying to upload the story with provided video from the stories builder

Environment

• React Native version: 0.67.3
• Platform: any Android

react-native-share

Version: 7.6.4

Summary

I'm not sure I'm doing it the right way though. Please let me know if there is a better way to share videos to Instagram Stories from an Android device.

Edit

Fixed typo

[EstebanFuentealba]

I haven't tried but try changing

const shareOptions: ShareSingleOptions = {
  social: Share.Social.INSTAGRAM_STORIES,
  backgroundImage: `data:${file.type};base64,` + base64,
}

by

const shareOptions: ShareSingleOptions = {
  social: Share.Social.INSTAGRAM_STORIES,
  backgroundVideo: `data:${file.type};base64,` + base64,
}

[KostiantynSosonnyi]

I haven't tried but try changing

const shareOptions: ShareSingleOptions = {
  social: Share.Social.INSTAGRAM_STORIES,
  backgroundImage: `data:${file.type};base64,` + base64,
}

by

const shareOptions: ShareSingleOptions = {
  social: Share.Social.INSTAGRAM_STORIES,
  backgroundVideo: `data:${file.type};base64,` + base64,
}

Sorry, it's a typo. I'll fix initial post. Thanks for your reply.

[GoktuqCan]

I've created a PR for backgroundVideo on Android. You can check the fix and usage here.

[MateusAndrade]

@KostiantynSosonnyi can you check if #1248 fix this?

[KostiantynSosonnyi]

@GoktuqCan Yes! That works for me, thank you very much, you are a lifesaver!

@MateusAndrade Yes, the fix works for me. I'm using the method suggested by @GoktuqCan in his PR so there is no need for a base64 encode.

[davidwinograd1]

Still facing this error. Any solution?

[Giasinit]

Still facing this error. Any solution?

@davidwinograd1 , I see you're always active in all the issues, lol. In my opinion, if it's working on iOS but not on Android, it might be because the Instagram app doesn't open as we discussed. On Android, the app needs to recognize the existence of a potential Instagram app package beforehand; otherwise, it can't open it immediately.

What I recommend doing is double-checking if the app opens immediately. If it doesn't, it doesn't make sense to look for a solution for sharing Instagram videos if it can't automatically share stories!

[davidwinograd1]

@Giasinit
The Instagram app does not open. But it opens for Instagram DM.
Why might this be? To be clear, I'm having the issue for sharing a video to Instagram Stories on Android.

[Giasinit]

@davidwinograd1 ok, i understood, what about instagram story? is it open app automatically? or you need to choose instagram icon app?

[davidwinograd1]

@Giasinit
Sharing video on Instagram story for Android doesn't do anything. No app opens. But the same code works on iOS.

[davidwinograd1]

const shareToInstagramStories = async (bite) => {
    const shareOptions = {
      backgroundVideo: bite.url,
      type: 'video/mp4',
      social: Share.Social.INSTAGRAM_STORIES,
      appId: // appId
      forceDialog: true,
      useInternalStorage: true,
    };

    Share.shareSingle(shareOptions)
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.error(err);
      });
  };

[Giasinit]

okok.. what about just a photo? not video. it is work with photos sharing stories??

[davidwinograd1]

I haven't tried with a photo because it's not needed for the use-case of my app. Is it necessary to try out to give you enough info to help diagnose the problem? I can do that now...

[Giasinit]

@davidwinograd1 you MUST try it, the library I think focused on sharing images in stories, then in videos. but if it doesn't work in images first, it is unlikely to work in videos!

[Giasinit]

@davidwinograd1 if it doesn't even open the app for you, then it's the problem I told you about. but it seems impossible that it doesn't work.
may i ask in which country are you testing? it could be that according to a country the name of the instagram package is different from normal.
actually, maybe one thing could be the fact that you're using base64, the data-uri for the video, it might not be the best thing... but in my opinion better you use the catlogs you can find on android studio that allow you to view the native system and app logs. as long as you have ADB and allow usb debugging.

[davidwinograd1]

@Giasinit should the video be converted to base64? right now it is not for me. I'm in USA.... And based on documentation, stickerImage does not seem to be required.

[davidwinograd1]

@Giasinit image for Android instagram story also does not work...same issue as this person, which seemingly has no solution:

#1441

[davidwinograd1]

is there any case of INSTAGRAM_STORIES working for any Android user?

[Giasinit]

@davidwinograd1 i'm pretty sure that you, if you do "npx expo prebuild --platform android", and go to the AndroidManifest.xml, you won't find <package android:name="com.instagram.android"/>. now i'll send you the screenshot of what you should have in the AndroidManifest, otherwise this becomes nonsense

[davidwinograd1]

yes, I do have instagram in my AndroidManifest.xml @Giasinit

[Giasinit]

@davidwinograd1 if it automatically gave you that, then that's very strange! What do you use to build the application?