implementing react-native-fbsdkshare

I have followed the guide written on https://github.com/facebook/react-native-fbsdk to install and use the react-native-fbsdk module. However, when I click the "Share" button it throws the following error:

'Error: undefined is not an object (evaluating \'FBSDKShareDialogInterface.show\')

Also 3 warnings appear when I run the app:

'Warning: Native component for "RCTFBSDKShareButton" does not exist' 'Warning: Native component for "RCTFBSDKSendButton" does not exist' 'Warning: Native component for "RCTFBSDKLikeControl" does not exist'

This is the code that I use:

var FBSDKShare = require('react-native-fbsdkshare');

var { FBSDKShareDialog, FBSDKShareDialogInterface, FBSDKShareLinkContent, FBSDKShareShareButton } = FBSDKShare;

shareOnFacebook() {

      var linkContent = new FBSDKShareLinkContent('https://facebook.com', 'Wow, check out this great site!', 'Facebook.com', null);
// Share the link using the native share dialog.
FBSDKShareDialog.show(linkContent, (error, result) => {
  if (!error) {
    if (result.isCancelled) {
      alert('Share cancelled.');
    } else {
      alert('Thanks for sharing!');
    }
  } else {
    alert('Error sharing.');
  }
});

<TouchableHighlight style={[itemStyles.itemButtonShare,itemStyles.itemButtonShareFacebook]} onPress={() => this.shareOnFacebook(item)}><Text>Share On Facebook</Text></TouchableHighlight>

(I have FBSDKCoreKit.framework, FBSDKLoginKit.framework and FBSDKShareKit.framework already installed and framework search path is set.) Anyone can help with this error please? thanks

----- EDITED -------

Ok finally I decided to create a native method and call it from react side. If anybody faces this problem this is the alternate solution:

Create 2 files, FacebookShareManager.h and FacebookShareManager.m :

The content of FacebookShareManager.h should be:

    #import "RCTBridgeModule.h"

@interface FacebookShareManager : NSObject <RCTBridgeModule>
@end

and the content of the FacebookShareManager.m :

    #import "FacebookShareManager.h"
#import "FBSDKCoreKit/FBSDKCoreKit.h"
#import "FBSDKShareKit/FBSDKShareKit.h"

@implementation FacebookShareManager

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(showDialog: (NSDictionary *)params callback:(RCTResponseSenderBlock)callback ) {


  dispatch_async(dispatch_get_main_queue(), ^{

    FBSDKShareLinkContent *content = [[FBSDKShareLinkContent alloc] init];

    NSURL    *    shareUrl      = [NSURL URLWithString:params[@"contentUrl"]];
    NSURL    *    shareImageUrl = [NSURL URLWithString:params[@"contentImageUrl"]];
    NSString * shareTitle       = [NSString stringWithString:params[@"contentTitle"]];
    NSString * shareDescription = [NSString stringWithString:params[@"contentDescription"]];

    content.contentURL         = shareUrl;
    content.imageURL           = shareImageUrl;
    content.contentTitle       = shareTitle;
    content.contentDescription = shareDescription;

    [FBSDKShareDialog showFromViewController:nil
                                 withContent:content
                                    delegate:nil];

  });

};

@end

Now you we need to call this method from our react-native component:

First include the manager at the top of your react-native component class file:

var FacebookShareManager = require('NativeModules').FacebookShareManager;

Now inside your component class add this method:

    shareOnFacebook(item) {


      var params = {"contentUrl": item.url,"contentImageUrl": item.pictureUrl,"contentTitle": item.title,"contentDescription":item.description};
      FacebookShareManager.showDialog(params, (info)=> {


        // do something you need...


    });

  }

I had exactly the same problem, and it turned out that I had facebook sdk v4.7.1. So

  1. I removed the previous and downloaded the latest v4.8.0.
  2. Then I followed again all steps starting from installing JavaScript packages
  3. Then manually added files to xcode.

After I used share dialogs from example on github and everything works fine now.

Comments

Popular posts from this blog

Meaning of `{}` for return expression

Get current scroll position of ScrollView in React Native

React Native - Image Cache