Search code examples
react-nativereact-native-fbsdk

How do I share an action using react-native-fbsdk?


We're doing this in the web version of our react application and our native Android app so our setup and everything is working fine. I'm trying to implement sharing an action in react-native using react-native-fbsdk. I'm following the Android code because it looks the closest to the react-native-fbsdk code.

Should I be using ShareApi.share or something else?

I tried creating an instance of ShareOpenGraphContent to use with ShareApi.share, but there's no constructor.

I wish they would provide more thorough documentation :s

Based on the code my colleague used for the ShareApi on Android it seems like react-native-fbsdk is missing a few things related to sharing actions.

ShareOpenGraphContent isn't directly exported from react-native-fbsdk so this

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

Actually doesn't work. There must be some way to use the ShareApi in react-native-fbsdk to share an action...I'm just missing something.

Someone help...please.

Thanks!!


Solution

  • I figured it out! I had to manually create an instance of the ShareOpenGraphContent object which has 3 mandatory properties: contentType, action and previewPropertyName. The react-native-fbsdk doesn't currently have a constructor for this object type.

    ShareApi.canShare isn't mandatory, but it checks to ensure you have the correct permissions before trying to share. This would allow you to get the user logged in before trying in case their token expired, or the user hasn't agreed to the needed permissions yet.

    const ogAction = new ShareOpenGraphAction('<your_facebook_namespace>' + ':' + '<your_facebook_action>');
    ogAction.putString('song', 'https://<url_to_your_song_app_etc>');
    ogAction.putString('place', '<fbPlacePageID>'');
    ogAction.putNumber('fb:explicitly_shared', 1); // Normally this is a boolean, but putNumber with a value of 1 works
    
    // Manually create an instance of ShareOpenGraphContent (no constructor in the API)
    const ogContent = {
      contentType: 'open-graph',
      action: ogAction,
      previewPropertyName: 'song',
    };
    
    ShareApi.canShare(ogContent).then((canShare) => {
      if (canShare)
        return ShareApi.share(ogContent, '/me');
    }).then(
      function(result) {
        // Shared successfully
      },
      function(error) {
        // Failed to share
      }
    );