Facebook Share – React Native

Facebook Share-React Native

React native provides Facebook SDK to integrate facebook APIs in react native application. It can be used for both (iOS and Android) platforms. Below is the documentation to configuration this package for android:

Installation:
1. Go to your project location in the terminal and run the below command:
npm install react-native-fbsdk
2. After that, link the SDK to configure ios or android project
react-native link react-native-fbsdk
Configuration:
1. In MainApplication.java,
– add an instance variable of type CallbackManager and its getter.

– Register package in method getPackages()

2. In MainActivity.java, override onActivityResult() method

3. Also add the package in your settings.gradle:
include ‘:react-native-fbsdk’
project(‘:react-native-fbsdk’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-fbsdk/android’)

4. And add react-native-fbsdk to dependencies in your app build.gradle:
dependencies {
...
implementation 'com.facebook.android:facebook-android-sdk:4.34.0'
implementation project(':react-native-fbsdk')
}
After linking package create an app on facebook developer (https://developers.facebook.com/) and follow the following steps:

Add Facebook App ID
To get an App ID, you will need to register a free app with Facebook.
1. Open /app/res/values/strings.xml file.
2. Add a string element with the name attribute facebook_app_id and value as your Facebook App ID to the file. For example:

<resources>
<string name="app_name">myApp</string>
<string name="facebook_app_id">123456</string>
</resources>

3. Open /app/manifests/AndroidManifest.xml and add a uses-permission element to the manifest:

<uses-permission android:name="android.permission.INTERNET"/>

4. Add a meta-data element in the application element:

<application android:label="@string/app_name" ...>
    ...
    <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
    …
</application>

If you’re using Facebook to share links, images or video for Android app, you also need to declare the FacebookContentProvider in the manifest. Add it in the application element.
Append the app id into the end of the authorities value. For example, if your Facebook app id is 123456, the declaration will looks like this:

<provider android:authorities="com.facebook.app.FacebookContentProvider123456" android:name="com.facebook.FacebookContentProvider"           android:exported="true" />

Usage Example:
Share link with facebook :
In this you need to define the contentType ‘link’ to share a link to facebook.

import { ShareDialog } from 'react-native-fbsdk';
const shareLinkContent = {
  contentType: 'link',
  contentUrl: "https://facebook.com",
  contentDescription: 'Wow, check out this great site!',
};
export default class ViewMediaLibrary extends Component<Props> {
   constructor(props){
       super(props);
}
shareWithFacebook(){
	
  ShareDialog.canShow(this.state.shareLinkContent).then(
    function(canShow) {
      if (canShow) {
        return ShareDialog.show(this.state.shareLinkContent);
      }
    }
  ).then(
    function(result) {
      if (result.isCancelled) {
        console.log('Share cancelled');
      } else {
        console.log('Share success with postId: '
          + result.postId);
      }
    },
    function(error) {
      console.log('Share fail with error: ' + error);
    }
  );

}

render(){
return (
	<Button title=”share with Facebook” onPress={()=>this.shareWithFacebook()}/>
)
}
}

Share photos with facebook:

import { ShareDialog } from 'react-native-fbsdk';
const photoUri = 'file://' + '/path/of/photo.png'
const sharePhotoContent = {
  contentType = 'photo',
  photos: [{ imageUrl: photoUri }],
}
export default class ViewMediaLibrary extends Component<Props> {
   constructor(props){
       super(props);
}
shareWithFacebook(){
	
  ShareDialog.canShow(this.state.sharePhotoContent).then(
    function(canShow) {
      if (canShow) {
        return ShareDialog.show(this.state.sharePhotoContent);
      }
    }
  ).then(
    function(result) {
      if (result.isCancelled) {
        console.log('Share cancelled');
      } else {
        console.log('Share success with postId: '
          + result.postId);
      }
    },
    function(error) {
      console.log('Share fail with error: ' + error);
    }
  );

}

render(){
return (
<Button title=”share with Facebook” onPress={()=>this.shareWithFacebook()}/>
)
  }
 }

Share Videos with facebook:

import { ShareDialog } from 'react-native-fbsdk';
const videoUri = 'file://' + '/path/of/video.mp4'
const shareVideoContent = {
  contentType = 'video',
  video: { localUrl: videoUri },
}
export default class ViewMediaLibrary extends Component<Props> {
   constructor(props){
       super(props);
}

shareWithFacebook(){
	
  ShareDialog.canShow(this.state.shareVideoContent).then(
    function(canShow) {
      if (canShow) {
        return ShareDialog.show(this.state.shareVideoContent);
      }
    }
  ).then(
    function(result) {
      if (result.isCancelled) {
        console.log('Share cancelled');
      } else {
        console.log('Share success with postId: '
          + result.postId);
      }
    },
    function(error) {
      console.log('Share fail with error: ' + error);
    }
  );

}

render(){
return (
	<Button title=”share with Facebook” onPress={()=>this.shareWithFacebook()}/>
)
}
}

Note: To test a sharing option for photos and videos for facebook, there must be a facebook app installed on your real device. One more thing is that, If you are sharing any photos with https:// or http:// links then it will be shared as links, to share as a picture you can use RNFetchBlob library provided by react native, which will provide you with the temporary path of the image or video. With the help of that path, you can use it to share on facebook.