1

recently i've been trying to setup facebooksdk into my react-native apps. I've gone through a lot of post, but i'm still getting a lot of errors during setup.

i follow guide, and i install using npm react-native-fbsdk@0.6.0 ( because latest version have error ) and i ran react-native link react-native-fbsdk

Below is my setup

MainApplicaiton.Java

package com.ddc;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.oblador.vectoricons.VectorIconsPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.facebook.CallbackManager;
import com.facebook.FacebookSdk;

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

public class MainApplication extends Application implements ReactApplication {

  private static CallbackManager mCallbackManager = CallbackManager.Factory.create();

  protected static CallbackManager getCallbackManager() {
    return mCallbackManager;
  }

  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),
          new VectorIconsPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    FacebookSdk.sdkInitialize(getApplicationContext());
  }
}

MainActivity.Java

package com.ddc;

import com.facebook.react.ReactActivity;
import android.content.Intent;

public class MainActivity extends ReactActivity {

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
    }

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "DDC";
    }
}

My build.gradle

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.1"

    defaultConfig {
        applicationId "com.ddc"
        minSdkVersion 16
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}

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

This is the result I've got

enter image description here

Darren Lau
  • 1,995
  • 4
  • 25
  • 40
  • I have the same issue but I think that its more of a bug, hope someone knows the fix and answers this! – Shariq Musharaf Jul 07 '17 at 09:38
  • @ShariqMusharaf do you mind to share if u found the solution ? – Darren Lau Jul 08 '17 at 11:35
  • 1
    @ShariqMusharaf in your build.grade add this : compile(project(':react-native-fbsdk')){ exclude(group: 'com.facebook.android', module: 'facebook-android-sdk') } compile "com.facebook.android:facebook-android-sdk:4.22.1" – Darren Lau Jul 09 '17 at 07:10
  • Thanks for the help! – Shariq Musharaf Jul 10 '17 at 07:58
  • Possible duplicate of [react-native-fbsdk error: No resource found that matches the given name: attr 'android:keyboardNavigationCluster'](https://stackoverflow.com/questions/47757074/react-native-fbsdk-error-no-resource-found-that-matches-the-given-name-attr-a) – Syed Zain Ali Jul 18 '18 at 13:20

2 Answers2

8

Add this lines into your gradle.build :

compile(project(':react-native-fbsdk')) {
 exclude(group: 'com.facebook.android', module: 'facebook-android-sdk')
}
compile('com.facebook.android:facebook-android-sdk:4.22.1')
2

The latest solution should be easy just like this:

Open app/build.gradle and add react-native-fbsdk as dependencies

dependencies {
     ...
     implementation project(':react-native-fbsdk')
}

The compile configuration is now deprecated and should be replaced by implementation or api

ggDeGreat
  • 1,098
  • 1
  • 17
  • 33