/ android

React Native - Inbuilt Share Module

React-Native have added Sharing as part of the build now as of react-native version 0.32. This is just an example of how to use the share library based on the official example and code. I am sure the react-native documentation will be updated very soon with the details.

TL;DR – Here is the Code

Software Versions
React 15.3.0
React-Native 0.33
OS Android (Haven't tested on iOS but it is supported)
Pre-Requisite
  • React native is installed
  • You are able to run the sample app either on emulator or actual device. Follow the Getting Started guide at react documentation.
  • ES6 basics
Setup
  • Import Share module from react-native
import { Share } from 'react-native'
  • Update render to add Buttons which can be clicked to share.
render() {
    return (
      {/*Share only text*/}
      <View style={styles.container}>
        <TouchableHighlight onPress={this._shareTextMessage}>
          <View style={styles.button}>
            <Text>Click to share message</Text>
          </View>
        </TouchableHighlight>
      {/*Share text with title*/}
        <TouchableHighlight onPress={this._shareTextWithTitle}>
          <View style={styles.button}>
            <Text>Click to share message, URL and title</Text>
          </View>
        </TouchableHighlight>
      </View>
    );
  }
  • Add some Style
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  button: {
    backgroundColor: '#76c9f8',
    padding: 10,
    margin: 10,
    borderRadius: 5
  }
});

You should have the button on the screen as shown:
Initial Screen

  • Implement _shareTextMessage
  _shareTextMessage () {
    Share.share({
      message: 'Such sharing! Much wow!'
    })
    .then(this._showResult)
    .catch(err => console.log(err))
  }
  _showResult (result) {
    console.log(result)
  }
  • Implement Advanced Share
  _shareTextWithTitle () {
    Share.share({
      message: 'This message has a title',
      title: 'Best title ever!',
      url: 'http://codingmiles.com'
    }, {
      dialogTitle: 'This is share dialog title',
      excludedActivityTypes: [
        'com.apple.UIKit.activity.PostToTwitter',
        'com.apple.uikit.activity.mail'
      ],
      tintColor: 'green'
    })
    .then(this._showResult)
    .catch(err => console.log(err))
  }
Feature Support
Feature Description Android iOS
message Message to be shared Yes Yes
title Title of the message Yes Yes
url URL to be shared No Yes
dialogTitle Title of the share dialog Yes No
excludedActivityTypes Activities to be excluded in the share list No Yes
tintColor Tint color of the share dialog No Yes
Response Details

Following is from the code documentation

In Android, Returns a Promise which always be resolved with action being Share.sharedAction.

In iOS, Returns a Promise which will be invoked an object containing action, activityType. If the user dismissed the dialog, the Promise will still be resolved with action being Share.dismissedAction and all the other keys being undefined.

Running the code
  • On click of Click to Share message, you should see a share dialog with default title Share with
Initial Screen
  • You can choose any of the listed app to share.

  • On click of Click to share Message, URL and title, you should see

Initial Screen
  • Note the title of the Dialog is changed at the top based on the property dialogTitle
Note

If you are trying on Emulator, you may see that the messaging app gets open by default on click of share buttons. This happens because there aren't any apps available on the emulator to share the message. To test it on Emulator, either download the apk and install or Install Google Play on Emulator and install apps through it.