React Native: error: resource android:style/TextAppearance.Material.Widget.Button.Borderless.Colored not found

Question

I am trying to get Facebook Login for my React Native Android project and when I try to build it with react-native run-android I am getting this error.

I thought at first it was an issue with my Gradle version as React Native comes with Gradle 2.14 installed and I since upgraded to Gradle 4.4.

I went back through the Facebook installation guide multiple times and I am still getting this error. I also triple checked my code to make sure I am not using any bad font/fontWeight/fontStyle. The only thing I can think of is the Facebook button that comes from the standard component has unsupported styles in there? I am not sure.

Any help would be greatly appreciated. I've been at this longer than I want to admit!

MainActivity.java file

package com.myproj;

import android.content.Intent;
import com.facebook.react.ReactActivity;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.FacebookSdk;

public class MainActivity extends ReactActivity {

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

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

MainApplication.java file

package com.myproj;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
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 com.facebook.appevents.AppEventsLogger;





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)
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

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

  @Override
  public void onCreate() {
    super.onCreate();
    AppEventsLogger.activateApp(this);

  }

}

myProj/android/build.gradle file

// Top-level build file where you can add configuration options common to all sub-projects/modules.



buildscript {
    repositories {
        jcenter()


    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }

    }
}

ERRORS I am getting:

> Configure project :app 
WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation'.
It will be removed at the end of 2018

> Configure project :react-native-fbsdk 
WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation'.
It will be removed at the end of 2018
WARNING: The specified Android SDK Build Tools version (26.0.2) is ignored, as it is below the minimum supported version (27.0.3) for Android Gradle Plugin 3.1.0.
Android SDK Build Tools 27.0.3 will be used.
To suppress this warning, remove "buildToolsVersion '26.0.2'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

error: resource android:style/TextAppearance.Material.Widget.Button.Borderless.Colored not found.
error: resource android:style/TextAppearance.Material.Widget.Button.Colored not found.
/Users/me/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.0.2.aar/a1a4a045a3ea2f70ae16170c81e2001d/res/values-v26/values-v26.xml:9:5-12:13: AAPT: error: resource android:attr/colorError not found.

/Users/me/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.0.2.aar/a1a4a045a3ea2f70ae16170c81e2001d/res/values-v26/values-v26.xml:13:5-16:13: AAPT: error: resource android:attr/colorError not found.

/Users/me/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.0.2.aar/a1a4a045a3ea2f70ae16170c81e2001d/res/values-v26/values-v26.xml:17:5-93: AAPT: error: style attribute 'android:attr/keyboardNavigationCluster' not found.

/Users/me/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.0.2.aar/a1a4a045a3ea2f70ae16170c81e2001d/res/values/values.xml:252:5-69: AAPT: error: resource android:attr/fontStyle not found.

/Users/me/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.0.2.aar/a1a4a045a3ea2f70ae16170c81e2001d/res/values/values.xml:252:5-69: AAPT: error: resource android:attr/font not found.

/Users/me/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.0.2.aar/a1a4a045a3ea2f70ae16170c81e2001d/res/values/values.xml:252:5-69: AAPT: error: resource android:attr/fontWeight not found.

error: failed linking references.

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processDebugResources'.
> Failed to process resources, see aapt output above for details.

Total side confusion as well - Facebook tells you in the RN set up guides to target SDK 23 or 6.0 But then the target SDK inside the node_modules folder for react-native-fbsdk is higher thus giving me the warnings

Answer 1

Can't remember where I picked this up but if you are feeling reckless you can force libraries onto the same sdk by adding:

subprojects {
    afterEvaluate {project ->
    // force libs to use recent buildtools
        if (project.hasProperty("android")) {
            android {
                compileSdkVersion = 27  // change to match your desired version
                buildToolsVersion = "27.0.3" // ....
            }
        }
    }
}

to your root android/build.gradle. Hasn't failed me so far after a react-native-git-upgrade. ymmv

Answer 2

build.gradle -- Project level inside ---> allprojects add subprojects

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")

        }


        google()
        jcenter()
    }

       //Add subprojects

    subprojects {
        afterEvaluate {
            project ->
                if (project.hasProperty("android")) {
                    android {
                        compileSdkVersion = 28
                        buildToolsVersion = "28.0.3"
                    }
                }
        }
    }  

}