Share photo to Instagram from React-Native app built with Expo SDK

Question

I want my react-native app to share a photo with Instagram. I know it\'s possible when writing in native code to open up Instagram\'s filter screen with a specified photo.

Answer 1

Here is how you post

import { CameraRoll } from 'react-native'

callThisFunction = async () => {
      await CameraRoll.saveToCameraRoll("https://images.unsplash.com/photo-1504807417934-b7fdec306bfd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80", 'photo');
      let instagramURL = `instagram://library?AssetPath=null`;
      Linking.openURL(instagramURL);
  }

Answer 2

Here is how to share a file from a remote url: download it first! :)

  const downloadPath = FileSystem.cacheDirectory + 'fileName.jpg';
  // 1 - download the file to a local cache directory
  const { uri: localUrl } = await FileSystem.downloadAsync(remoteURL, downloadPath);
  // 2 - share it from your local storage :)
  Sharing.shareAsync(localUrl, {
    mimeType: 'image/jpeg',            // Android
    dialogTitle: 'share-dialog title', // Android and Web
    UTI: 'image/jpeg'                  // iOS
  });

Answer 3

I put together an example that you can run on iOS here: https://snack.expo.io/rkbW-EG7-

Full code below:

import React, { Component } from 'react';
import { Linking, Button, View, StyleSheet } from 'react-native';
import { ImagePicker } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Button title="Open camera roll" onPress={this._openCameraRoll} />
      </View>
    );
  }

  _openCameraRoll = async () => {
    let image = await ImagePicker.launchImageLibraryAsync();
    let { origURL } = image;
    let encodedURL = encodeURIComponent(origURL);
    let instagramURL = `instagram://library?AssetPath=${encodedURL}`;
    Linking.openURL(instagramURL);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
});

This will let you open up your camera roll and pick an image, then open the Instagram app with that image selected. If the image isn't already on the camera roll, then you can use CameraRoll.saveToCameraRoll on the image (link to React Native documentation) to get it there.

The approach used in this example will only work if you are OK with sharing from the camera roll, however, and I am unsure about how to do this on Android. I made an issue on Expo's feature request board to make sure that Instagram sharing works great out of the box.

Answer 4

Worked For Me :)

onClick = () => {
  ImagePicker.launchImageLibrary(options, response =>{
    console.log(response);
    let instagramURL = `instagram://library?LocalIdentifier=`+response.origURL;
    Linking.openURL(instagramURL);
  })