Adding facebook SDK to react-native project

Question

I am trying to add facebook sdk in my react-native project using this link - https://developers.facebook.com/docs/react-native/getting-started-android

But, rnpm was not adding the SDK automatically as described in the link. So, I manually added react-native-fbsdk using this link - https://github.com/facebook/react-native-fbsdk/issues/205

Then, I build my project and generate release and debug apk. But, now the android app is crashing at the launch time. And, there is no way to find out why this is happening.

Here is the code-

MainActivity.java

package com.netizen_hybrid;


import android.content.Intent;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import com.facebook.FacebookSdk;
import com.facebook.CallbackManager;
import com.facebook.reactnative.androidsdk.FBSDKPackage;

import java.util.Arrays;
import java.util.List;

public class MainActivity extends ReactActivity {
    CallbackManager mCallbackManager;
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    
    @Override
    protected String getMainComponentName() {
        return "Netizen_Hybrid";
    }

    /**
     * Returns whether dev mode should be enabled.
     * This enables e.g. the dev menu.
     */
    @Override
    protected boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

    /**
     * A list of packages used by the app. If the app uses additional views
     * or modules besides the default ones, add more packages here.
     */
    @Override
    protected List<ReactPackage> getPackages() {
        mCallbackManager = new CallbackManager.Factory().create();
        ReactPackage packages[] = new ReactPackage[]{
           new MainReactPackage(),
           new FBSDKPackage(mCallbackManager),
        };
        return Arrays.<ReactPackage>asList(packages);
    }
    
    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
       super.onActivityResult(requestCode, resultCode, data);
       mCallbackManager.onActivityResult(requestCode, resultCode, data);
    }
    
}

build.gradle -

dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+"  // From node_modules
compile 'com.facebook.android:facebook-android-sdk:4.+'
compile project(":react-native-fbsdk")

}

settings.gradle -

rootProject.name = 'Netizen_Hybrid'

include ':app'

include ':react-native-fbsdk'
project(':react-native-fbsdk').projectDir = new File(settingsDir, '../node_modules/react-native-fbsdk/Android')

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.netizen_hybrid"
    android:versionCode="1"
    android:versionName="1.0">

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

    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="22" />

    <application
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme"
      android:name="com.netizen_hybrid.MyApplication"
      >
      
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.FacebookActivity"
          android:configChanges=
                 "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
          android:theme="@android:style/Theme.Translucent.NoTitleBar"
          android:label="@string/app_name" />
      <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
      <provider android:authorities="com.facebook.app.FacebookContentProvider142933766117579"
          android:name="com.facebook.FacebookContentProvider"
          android:exported="true" />
    </application>

</manifest>

MyApplication.java -

import android.app.Application;
import com.facebook.FacebookSdk;
import com.facebook.appevents.AppEventsLogger;

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        // Initialize the SDK before executing any other operations,
        FacebookSdk.sdkInitialize(getApplicationContext());
        AppEventsLogger.activateApp(this);
    }
}

Can Anybody tell where I am doing wrong ? Thanks in advance.

dzhuowen dzhuowen · Accepted Answer · 2016-06-09T18:40:52

The configs looks correct to me. But I could be overlooking sth. Can you try generating the apk for the HelloFacebook sample app https://github.com/facebook/react-native-fbsdk/tree/master/Sample? That might help checking out what's missing. Besides, you can also point me to your project(containing only the necessary code) on GH so I can help with the debugging.

Adding facebook SDK to react-native project

2 Answers