Want create site? Find Free WordPress Themes and plugins.

React-Native-FBSDK is a wrapper around for iOS Facebook SDK and Android Facebook SDK, allowing for Facebook integration in React Native apps.

First of all we need  Facebook App ID. To get fb_id, open Facebook developer dashboard and create your application. Facebook Developer console

1-Installation

You need to install the sdk with npm and configure native Android/iOS project in the react native project.

react-native init ProjectName

2-Install Packages

npm i -s react-native-fbsdk

React-native link react-native-fbsdk

3-Configure Android Project

Go to MainApplication.java and MainActivity.java setup.

In MainApplication.java

Add an instance variable of type CallbackManager and its getter

 private static CallbackManager mCallbackManager = CallbackManager.Factory.create();
 protected static CallbackManager getCallbackManager() {
 return mCallbackManager;
 }
override onCreate() method and add to Initialize Facebook SDK
@Override
 public void onCreate() {
 super.onCreate();
 FacebookSdk.sdkInitialize(getApplicationContext());
 SoLoader.init(this, /* native exopackage */ false);
 }

Register SDK Packages

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
 @Override
 public boolean getUseDeveloperSupport() {
 return BuildConfig.DEBUG;
 }
 @Override
 protected List<ReactPackage> getPackages() {
 return Arrays.<ReactPackage>asList(
 new MainReactPackage(),
 new FBSDKPackage(mCallbackManager)
 );
 }
 @Override
 protected String getJSMainModuleName() {
 return "index";
 }
 };
@Override
 public ReactNativeHost getReactNativeHost() {
 return mReactNativeHost;
 }

In MainActivity.java add onActivityResult method

@Override

    public void onActivityResult(int requestCode, int resultCode, Intent data) {

        super.onActivityResult(requestCode, resultCode, data);

        MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
    }

Change Facebook Version in gradle (Module: react-native-fbsdk)

compile(‘com.facebook.android:facebook-android-sdk:4.29.0’)

Change Compile Version and buildToolsVersion is good as well

compileSdkVersion 26

    buildToolsVersion ‘26.0.1’

Add meta data in android manifiest file

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

4-React-Native Code

Log in and get user Data using GraphRequest, GraphRequestManager in React-native

import React, { Component } from 'react';
import {
 Platform,
 StyleSheet,
 Text,
 TouchableOpacity,
 View
} from 'react-native';
import { LoginManager,LoginButton,AccessToken,GraphRequest,GraphRequestManager} from 'react-native-fbsdk';
export default class App extends Component<{}> {
 render() {
 return (
 <View style={styles.container}>
 <Text style={styles.welcome}>
 Welcome to React Native!
 </Text>
 <LoginButton
 publishPermissions={["publish_actions"]}
 onLoginFinished={
 (error, result) => {
 if (error) {
 alert("login has error: " + result.error);
 } else if (result.isCancelled) {
 alert("login is cancelled.");
 } else {
 AccessToken.getCurrentAccessToken().then(
 (data) => {
 const infoRequest = new GraphRequest(
 '/me?fields=name,picture',
 null,
 this._responseInfoCallback
 );
 // Start the graph request.
 new GraphRequestManager().addRequest(infoRequest).start();
 }
 )
 }
 }
 }
 onLogoutFinished={() => alert("logout.")}/>
 </View>
 );
 }
 //Create response callback.
 _responseInfoCallback = (error, result) => {
 if (error) {
 alert('Error fetching data: ' + error.toString());
 } else {
 alert('Result Name: ' + result.name);
 }
 }
}
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#F5FCFF',
 },
 welcome: {
 fontSize: 20,
 textAlign: 'center',
 margin: 10,
 },
 instructions: {
 textAlign: 'center',
 color: '#333333',
 marginBottom: 5,
 },
});
Did you find apk for android? You can find new Free Android Games and apps.