React Native FBSDK is a wrapper around the iOS Facebook SDK and Android Facebook SDK, allowing for Facebook integration in React Native apps. Access to native components, from login to sharing, is provided entirely through documented JavaScript modules so you don't have to call a single native function directly.
Functionality is provided through one single npm package so you can use it for both platforms without downloading any extra packages. Follow this guide to use react-native-fbsdk in your react-native app.
You need to install the sdk with npm and configure native Android/iOS project in the react native project.
First create a React Native project:
react-native init YourAppInstall the react-native-fbsdk package:
npm install --save react-native-fbsdkYou can configure the iOS project and Android project both if you want to build a cross-platform app, or configure either side.
Assuming you have Android Studio installed, open the project with Android Studio and update the following files to build project with Gradle.
In settings.gradle, include the sdk subproject and specify the subproject path.
//...
include ':react-native-fbsdk'
project(':react-native-fbsdk').projectDir = new File(settingsDir, '../node_modules/react-native-fbsdk/Android')In app/build.gradle, enable multiDex support and add sdk to dependencies.
defaultConfig {
//...
multiDexEnabled true
}
//...
dependencies {
//...
compile project(":react-native-fbsdk")
}Go to MainActivity.java under app/src/main/java/com/<project name>/ to complete setup.
Note that packages must be imported to use.
Add an instance variable of type CallbackManager in class.
import android.content.Intent; // <--- import
import android.os.Bundle;
import com.facebook.CallbackManager;
import com.facebook.FacebookSdk;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
public class MainActivity extends ReactActivity {
CallbackManager mCallbackManager;
//...Register sdk package in method getPackages().
@Override
protected List<ReactPackage> getPackages() {
mCallbackManager = new CallbackManager.Factory().create();
ReactPackage packages[] = new ReactPackage[]{
new MainReactPackage(),
new FBSDKPackage(mCallbackManager),
};
return Arrays.<ReactPackage>asList(packages);
}Initialize sdk in method onCreate().
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
FacebookSdk.sdkInitialize(getApplicationContext());
} Override onActivityResult().
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
mCallbackManager.onActivityResult(requestCode, resultCode, data);
}To use AppEventsLogger, add method call to activateApp, deactivateApp and onContextStop in the corresponding life cycle events.
import com.facebook.appevents.AppEventsLogger; // <--- import
@Override
protected void onResume() {
super.onResume();
AppEventsLogger.activateApp(getApplicationContext());
}
@Override
protected void onPause() {
super.onPause();
AppEventsLogger.deactivateApp(getApplicationContext());
}
@Override
protected void onStop() {
super.onStop();
AppEventsLogger.onContextStop();
}Assuming you have CocoaPods (it's recommended to use v.1.0+ gem install cocoapods --pre) installed, complete the following steps:
In <project name>/ios directory, create a Podfile by running:
pod initOpen the generated Podfile and add the following code inside the project target:
target 'YourApp' do
source 'https://github.com/CocoaPods/Specs.git'
pod 'React', :subspecs => ['Core', 'RCTImage', 'RCTNetwork', 'RCTText', 'RCTWebSocket'], :path => '../node_modules/react-native'
pod 'react-native-fbsdkcore', :path => '../node_modules/react-native-fbsdk/iOS/core'
pod 'react-native-fbsdklogin', :path => '../node_modules/react-native-fbsdk/iOS/login'
pod 'react-native-fbsdkshare', :path => '../node_modules/react-native-fbsdk/iOS/share'
endRemove all the subprojects under Libraries/ in Xcode. This is because React Native's iOS code will be pulled in via CocoaPods.
Run pod install. This will automatically download the Facebook SDK for iOS and create an Xcode workspace containing all native files. From now on open YourApp.xcworkspace instead of YourApp.xcodeproj in Xcode.
Note: When doing 'pod install', warnings like The 'YourApp [Debug]' target overrides the 'OTHER_LDFLAGS' build setting ... may show up. To solve this, go to Xcode's target Build Setting section, find Other linker flags and add $(inherited) in it.
After you configure the native project in 3.1 and/or 3.2, follow the Getting Started guide for Android and iOS sdk to set up a Facebook app. You can skip the steps that talk about downloading and linking the Facebook SDK frameworks, -- that's already taken care of by the steps above.
If you get a build error stating that one of the Facebook SDK files was not found -- eg. FBSDKCoreKit/FBSDKCoreKit.h -- check two things:
- Ensure that the Facebook SDK frameworks are installed and show up in your xcode workspace.
- Ensure the schemes (react-native-fbsdkcore, react-native-fbsdklogin, and react-native-fbsdkshare) can be run successfully.
const FBSDK = require('react-native-fbsdk');
const {
LoginButton,
} = FBSDK;
var Login = React.createClass({
render: function() {
return (
<View>
<LoginButton
publishPermissions={["publish_actions"]}
onLoginFinished={
(error, result) => {
if (error) {
alert("login has error: " + result.error);
} else if (result.isCancelled) {
alert("login is cancelled.");
} else {
alert("login has finished with permissions: " + result.grantedPermissions)
}
}
}
onLogoutFinished={() => alert("logout.")}/>
</View>
);
}
});You can also use the Login Manager with custom UI to perform Login.
const FBSDK = require('react-native-fbsdk');
const {
LoginManager,
} = FBSDK;
// ...
// Attempt a login using the Facebook login dialog asking for default permissions.
LoginManager.logInWithReadPermissions(['public_profile']).then(
function(result) {
if (result.isCancelled) {
alert('Login cancelled');
} else {
alert('Login success with permissions: '
+result.grantedPermissions.toString());
}
},
function(error) {
alert('Login fail with error: ' + error);
}
);All of the dialogs included are used in a similar way, with differing content types. All content types are defined with Flow Type Annotation in js/models directory.
const FBSDK = require('react-native-fbsdk');
const {
ShareDialog,
} = FBSDK;
// ...
// Build up a shareable link.
const shareLinkContent = {
contentType: 'link',
contentUrl: "https://facebook.com",
contentDescription: 'Wow, check out this great site!',
};
// ...
// Share the link using the share dialog.
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);
}
);
}Your app must have the publish_actions permission approved to share through the share API. You should prefer to use the Share Dialogs for an easier and more consistent experience.
const FBSDK = require('react-native-fbsdk');
const {
ShareApi,
} = FBSDK;
// ...
// Build up a shareable link.
const shareLinkContent = {
contentType: 'link',
contentUrl: "https://facebook.com",
contentDescription: 'Wow, check out this great site!',
};
// ...
// Share using the share API.
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 with ShareApi success.');
},
function(error) {
alert('Share with ShareApi failed with error: ' + error);
}
);const FBSDK = require('react-native-fbsdk');
const {
AppEventsLogger,
} = FBSDK;
// ...
// Log a $15 purchase.
AppEventsLogger.logPurchase(15, 'USD', {'param': 'value'})const FBSDK = require('react-native-fbsdk');
const {
GraphRequest,
GraphRequestManager,
} = FBSDK;
// ...
//Create response callback.
_responseInfoCallback(error: ?Object, result: ?Object) {
if (error) {
alert('Error posting data: ' + error.toString());
} else {
alert('Success posting data: ' + result.toString());
}
}
// Create a graph request asking for user information with a callback to handle the response.
const infoRequest = new GraphRequest(
'/me',
null,
this._responseInfoCallback,
);
// Start the graph request.
new GraphRequestManager().addRequest(infoRequest).start();See the LICENSE file.
Developers looking to integrate with the Facebook Platform should familiarize themselves with the Facebook Platform Policy.