从使用 Expo SDK 构建的 React-Native 应用程序将照片分享到 Instagram

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. A restriction is that I'm using the Expo SDK, which doesn't allow 'npm link' for native dependencies.

When this function is called, it will open Instagram:

  _handlePress = () => {
    Linking.openURL('instagram://app');
  }

This is the Button:

   <Button 
      onPress={this._handlePress}
      title='Open Instagram'
    />

The image is stored in the state:

  state = {
    image: null,
    uploading: false
  }

I can display the image in an Image tag just fine:

<Image
  source={{uri: image}}
  style={{width: 300, height: 300}}
 />

But, I have no way passing the image along to Instagram. Here is some failed research: Third party libraries: react-native-instagram-share: https://www.instagram.com/developer/mobile-sharing/iphone-hooks/

Because I can't use 'link' to use native dependencies. I am using the Expo SDK which doesn't allow the 'link' for native dependencies.

The Instagram docs explain how to open Instagram, and that passing the image along can be done with native code. Which, is to use “UIDocumentInteractionController”, which isn't available in JavaScript.
https://www.instagram.com/developer/mobile-sharing/iphone-hooks/

There aren't any other Stackoverflow answers to my question.

Answer 1

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 2

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 3

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 4

Worked For Me :)

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