Facebook Sharing for React Native

This guide provides examples of using the Facebook Sharing components in your React Native applications. The SDK provides sharing dialogs and a sharing API so that you can use your own customized user interface.

Content Data Model

The same APIs are used to share content regardless of what type of content is shared. This allows the API to remain the same as new content types are added to the Facebook platform. To accomplish this, while still making the content types discoverable, each content type is defined with Flow type annotations. The data models for the supported content types are located in the js/models folder of the SDK.

For more details about the sharing feature of the Facebook SDK, see Sharing.

Share Dialogs

Sharing with the share dialogs is done using the ShareDialog class, which you import from the react-native-fbsdk module.

import { ShareDialog } from 'react-native-fbsdk';

You define the content to be shared as a JSON object. The following example code builds an object representing a shareable link to the Facebook.com site.

const shareLinkContent = {
         contentType: 'link',
          contentUrl: "https://facebook.com",
  contentDescription: 'Facebook sharing is easy!',
};

Confirm that the sharing dialog can be shown for your content, and then show it using the ShareDialog object. The following code demonstrates the process and shows you how to check for success or failure.

shareLinkWithShareDialog() {
  var tmp = this;
  ShareDialog.canShow(this.state.shareLinkContent).then(
    function(canShow) {
      if (canShow) {
        return ShareDialog.show(tmp.state.shareLinkContent);
      }
    }
  ).then(
    function(result) {
      if (result.isCancelled) {
        alert('Share operation was cancelled');
      } else {
        alert('Share was successful with postId: '
          + result.postId);
      }
    },
    function(error) {
      alert('Share failed with error: ' + error.message);
    }
  );
}

Here's a working code sample. To run it under iOS, create a default React Native iOS app by working through the

React Native - Getting Started Guide

, and then replace the contents of your app's index.ios.js file with the following code.

import React, { Component } from 'react';
import {AppRegistry, StyleSheet, Text, TouchableHighlight, View,} from 'react-native';
import {LoginButton, ShareDialog} from 'react-native-fbsdk';

class RNSample extends Component {
  constructor(props) {
    super(props);
    const shareLinkContent = {
      contentType: 'link',
      contentUrl: 'https://www.facebook.com/',
      contentDescription: 'Facebook sharing is easy!'
    };

    this.state = {shareLinkContent: shareLinkContent,};
  }

  shareLinkWithShareDialog() {
    var tmp = this;
    ShareDialog.canShow(this.state.shareLinkContent).then(
      function(canShow) {
        if (canShow) {
          return ShareDialog.show(tmp.state.shareLinkContent);
        }
      }
    ).then(
      function(result) {
        if (result.isCancelled) {
          alert('Share cancelled');
        } else {
          alert('Share success with postId: ' + result.postId);
        }
      },
      function(error) {
        alert('Share fail with error: ' + error);
      }
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <LoginButton
          publishPermissions={["publish_actions"]}
          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("Login failed with error: " + error.message);
              } else if (result.isCancelled) {
                alert("Login was cancelled");
              } else {
                alert("Login was successful with permissions: " + result.grantedPermissions)
              }
            }
          }
          onLogoutFinished={() => alert("User logged out")}/>
        <TouchableHighlight onPress={this.shareLinkWithShareDialog.bind(this)}>
          <Text style={styles.shareText}>Share link with ShareDialog</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

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

AppRegistry.registerComponent('RNSample', () => RNSample);

Share API

When sharing content on Facebook, use the share dialog for a more consistent user experience across applications.

Your application must have the publish_actions permission in order to share through the share API.

Sharing with the share API is done using the ShareApi class, located in the react-native-fbsdk module. The construction of the JSON object describing the content to be shared is identical to the way it is done with the share dialog, and the function calls are almost identical. The main difference is that the share dialog gives the user an opportunity to add a comment to the post in the dialog. Since no dialog is shown with the sharing API, that information is passed in as a parameter when share is called.

const FBSDK = require('react-native-fbsdk');
const {
  ShareApi,
} = FBSDK;

const shareLinkContent = {
  contentType: 'link',
  contentUrl: "https://facebook.com",
  contentDescription: 'Facebook sharing is easy!',
};
    
ShareApi.canShare(this.state.shareLinkContent).then(
  var tmp = this;
  function(canShare) {
    if (canShare) {
      return ShareApi.share(tmp.state.shareLinkContent, '/me', 'Some message.');
    }
  }
).then(
  function(result) {
    alert('Share operation with ShareApi was successful');
  },
  function(error) {
    alert('Share with ShareApi failed with error: ' + error);
  }
);