/ Sheet

Use the iOS share sheet from React Native

Use the iOS share sheet from React Native

react-native-share-sheet

Use the iOS share sheet from React Native.

Install

  1. npm install react-native-share-sheet
  2. In XCode, in the project navigator, right click Libraries -> Add Files to [YourProjectName]
  3. Go to node_modules/react-native-share-sheet/RNShareSheet and add RNShareSheet.m, RNShareSheet.swift, RNShareSheet-Bridging-Header.h
  4. Rename RNShareSheet-Bridging-Header.h to [YourProjectName]-Bridging-Header.h

Use

import { ShareSheet } from 'react-native-share-sheet

const share = {
  imageUrl: 'http://facebook.github.io/react-native/img/opengraph.png',
  text: 'some super cool text'
}
ShareSheet.open(share)

Example

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';

import { ShareSheet } from 'NativeModules'

const share = {
  url: 'http://facebook.github.io/react-native/',
  text: 'some super cool text'
};
class ShareSheetDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={() => ShareSheet.open(share)}>
          <Text style={styles.text}>
            Share
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    backgroundColor: 'lightblue',
    padding: 10,
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('ShareSheet', () => ShareSheetDemo);

Options

Property Value
text optional string
imageUrl optional url string or asset library string
url optional url of the web page to share

If both imageUrl and url specified, imageUrl will appear as the share preview

Examples

imageUrl

  • Asset Library path * assets-library://asset/asset.JPG?id=FF5F38D6-AACC-1116-3091-AF3499CD923D&ext=JPG
  • Image Url * http://facebook.github.io/react-native/img/opengraph.png

text

  • #ReactNative is awesome!

GitHub