react-native-inappbrowser: Build failed. Error cannot find symbol builder.setNavigationBarColor

> Task :react-native-inappbrowser-reborn:compileReleaseJavaWithJavac FAILED
/Users/alexandrsmirnov/Work/E-Orda/Colibri-mobile/node_modules/react-native-inappbrowser-reborn/android/src/main/java/com/proyecto26/inappbrowser/RNInAppBrowser.java:107: error: cannot find symbol
        builder.setNavigationBarColor(Color.parseColor(colorString));
               ^
  symbol:   method setNavigationBarColor(int)
  location: variable builder of type Builder
/Users/alexandrsmirnov/Work/E-Orda/Colibri-mobile/node_modules/react-native-inappbrowser-reborn/android/src/main/java/com/proyecto26/inappbrowser/RNInAppBrowser.java:116: error: cannot find symbol
        builder.setNavigationBarDividerColor(Color.parseColor(colorString));
               ^
  symbol:   method setNavigationBarDividerColor(int)
  location: variable builder of type Builder
2 errors

Which platform(s) does your issue occur on?

  • Android

Package.json

"react-native": "^0.64.2"  
"react-native-inappbrowser-reborn": "^3.6.1" 

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 7
  • Comments: 42 (18 by maintainers)

Most upvoted comments

this is a fresh init project version 0.64.2…it went to error as soon as i npm install this library…here is the link of the sample project https://github.com/mattop1709/agorgy

Thanks for sharing! I found the issue here: https://github.com/mattop1709/agorgy/blob/main/android/build.gradle#L10

Try using recent versions of AndroidX libraries (androidx.browser:browser):

  androidXAnnotation = "1.+"
  androidXBrowser = "1.+"

Let me know if you have any other questions 👍

Hey there - not to put too fine a point on it, but no time at all should be spent attempting to make things work with Android Support Libraries.

It’s been 2 years since AndroidX was released and Android Support was deprecated, while I empathize with the difficulty of upgrading in some cases and I certainly sympathized (past tense) which is obvious since I created the jetifier tool to help everyone, I am out of present-tense sympathy for the situation.

People need to update.

Do you have this configuration? facebook/react-native#25787 (comment) Can you attach a project to be able to reproduce this issue?

Thanks for your collaboration! 👍

this is a fresh init project version 0.64.2…it went to error as soon as i npm install this library…here is the link of the sample project https://github.com/mattop1709/agorgy

Facing the same issue with React native 0.61.4. It was working fine 2 days ago.

Sorry guys, are you using Android Support instead of AndroidX? 🤔

I’m using the androidX

Any updates about this issue?

@naveenkirugulige hmm still not working for me 😦

@pramahaditamaputra-ralali Using this solved the issue for me:


buildscript {
ext {
        buildToolsVersion = "29.0.3"
        minSdkVersion = 21
        compileSdkVersion = 29
        targetSdkVersion = 29
        ndkVersion = "20.1.5948944"
        androidXAnnotation = "1.+"
        androidXBrowser = "1.+"
    }
}

so how about the update ? how to fix this issue ? i’m facing this issue on RN 0.61.5

Can someone restate for me what was the fix here? It sounds like upgrading androidX fixed it for you, but I have a version that is the same version as above.

buildscript {
    ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 21
        compileSdkVersion = 29
        targetSdkVersion = 29
        androidXAnnotation = "1.1.0"
        androidXBrowser = "1.0.0"
        supportLibVersion = "28.0.0"
    }

What Android versions are you testing? Can you try example project of this repository? Please let me know 🙏

Happy week! ❤️

i’ve run into your code (project example) and it’s similar to my previous react native version (0.63.3). In this version, the app is working fine and able to run…the build error happened after I upgrade to version 0.64.2…

i am using android API 29…let me know if u need further info…

For people well and truly stuck there’s always patch-package to hack in compatibility inside current versions or to hack in current fixes to old versions. I would spend no time on it vs investing the time in actually moving forward but if you’re stuck you’re stuck, so it’s worth mentioning.

@jdnichollsc i wake up and decide to give a try to fix this issue for these projects in Android Support xD

okay, for those in the future:

To solve the problem with setNavigationBarColor:

  1. Migrate your react-native android app from Android Support to AndroidX using this guide: https://developer.android.com/jetpack/androidx/migrate

  2. Update you build script in build.gradle in app level with following:

ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 21
        compileSdkVersion = 28
        targetSdkVersion = 28
        ndkVersion = "20.1.5948944"
        androidXAnnotation = "1.+"
        androidXBrowser = "1.+"
    }
  1. Also in build.gradle in app level, downgrade your gradle plugin:
dependencies {
        classpath("com.android.tools.build:gradle:4.0.1") <-- I've downgraded for 4.0.1
    }

To solve the problem above with create_react_context do the following:

in build.gradle of the project add:


...

project.ext.react = [
    enableHermes: false,  // clean and rebuild if changing
    bundleAssetName: "index.android.bundle", <-- add this
    bundleInDebug: true, <-- add this
    bundleInRelease: true <-- add this
]

...

And in your AndroidManifest.xml add:

...
<application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:usesCleartextTraffic="true" <-- add this
      android:theme="@style/AppTheme">

...

Hope it’s helps you. reference: https://stackoverflow.com/questions/55441230/unable-to-load-script-make-sure-you-are-either-running-a-metro-server-or-that-yo?page=2&tab=votes#tab-top

Good question, with Android Support I’m not sure if exist any option or conditional compilation flag to avoid this issue, let me check, any pull request is welcome in the meantime! ❤️

fyi: i’m trying to migrate my app to AndroidX…

Hey @jdnichollsc , i’m facing the same problem. How could I solve this problem for Android support?

Click here to see package.json
{
    "name": "app",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "android": "react-native run-android",
        "ios": "react-native run-ios",
        "start": "env REACT_DEBUGGER=\"$([ -d '/Applications/React Native Debugger.app' ] && echo \"open 'rndebugger://set-debugger-loc?host=localhost&port=8081' --args\")\" node node_modules/react-native/local-cli/cli.js start",
        "test": "jest",
        "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
        "amplify-modelgen": "node amplify/scripts/amplify-modelgen.js",
        "amplify-push": "node amplify/scripts/amplify-push.js"
    },
    "dependencies": {
        "@aws-sdk/client-eventbridge": "^3.17.0",
        "@react-native-async-storage/async-storage": "^1.15.5",
        "@react-native-community/masked-view": "^0.1.10",
        "@react-native-community/netinfo": "^6.0.0",
        "@react-navigation/bottom-tabs": "5.11.11",
        "@react-navigation/native": "5.9.4",
        "@react-navigation/stack": "5.14.5",
        "@reduxjs/toolkit": "^1.5.1",
        "amazon-cognito-identity-js": "^5.0.3",
        "aws-amplify": "^4.1.2",
        "luxon": "^1.27.0",
        "normalizr": "^3.6.1",
        "react": "17.0.1",
        "react-native": "0.64.0",
        "react-native-config": "^1.4.2",
        "react-native-fast-image": "^8.3.4",
        "react-native-gesture-handler": "^1.10.3",
        "react-native-inappbrowser-reborn": "^3.6.1",
        "react-native-linear-gradient": "^2.5.6",
        "react-native-reanimated": "^2.0.1",
        "react-native-safe-area-context": "^3.2.0",
        "react-native-screens": "^3.0.0",
        "react-native-shimmer-placeholder": "^2.0.7",
        "react-native-toast-message": "^1.4.9",
        "react-native-vector-icons": "^8.1.0",
        "react-redux": "^7.2.3",
        "redux": "^4.0.5",
        "redux-devtools-extension": "^2.13.9",
        "redux-persist": "^6.0.0"
    },
    "devDependencies": {
        "@babel/core": "^7.12.9",
        "@babel/runtime": "^7.12.5",
        "@react-native-community/eslint-config": "^2.0.0",
        "@types/jest": "^26.0.20",
        "@types/luxon": "^1.27.0",
        "@types/react-native": "^0.64.0",
        "@types/react-native-vector-icons": "^6.4.6",
        "@types/react-test-renderer": "^16.9.2",
        "babel-jest": "^26.6.3",
        "eslint": "^7.14.0",
        "ini": "^1.3.5",
        "inquirer": "^6.5.1",
        "jest": "^26.6.3",
        "metro-react-native-babel-preset": "^0.64.0",
        "react-test-renderer": "17.0.1",
        "typescript": "^3.8.3"
    },
    "resolutions": {
        "@types/react": "^17",
        "react-devtools-core": "4.13.4"
    },
    "jest": {
        "preset": "react-native",
        "moduleFileExtensions": [
            "ts",
            "tsx",
            "js",
            "jsx",
            "json",
            "node"
        ]
    }
}
Click here to see build.gradle(project)
// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
        ndkVersion = "20.1.5948944"
        supportLibVersion = "28.0.0"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:4.1.0")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

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()
        maven { url 'https://www.jitpack.io' }
    }
}

Click here to see build.gradle(app)
apply plugin: "com.android.application"
project.ext.vectoricons = [
    iconFontNames: ['MaterialIcons.ttf', "Zocial.tts"] // Name of the font files you want to copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
import com.android.build.OutputFile

/**
 * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
 * and bundleReleaseJsAndAssets).
 * These basically call `react-native bundle` with the correct arguments during the Android build
 * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
 * bundle directly from the development server. Below you can see all the possible configurations
 * and their defaults. If you decide to add a configuration block, make sure to add it before the
 * `apply from: "../../node_modules/react-native/react.gradle"` line.
 *
 * project.ext.react = [
 *   // the name of the generated asset file containing your JS bundle
 *   bundleAssetName: "index.android.bundle",
 *
 *   // the entry file for bundle generation. If none specified and
 *   // "index.android.js" exists, it will be used. Otherwise "index.js" is
 *   // default. Can be overridden with ENTRY_FILE environment variable.
 *   entryFile: "index.android.js",
 *
 *   // https://reactnative.dev/docs/performance#enable-the-ram-format
 *   bundleCommand: "ram-bundle",
 *
 *   // whether to bundle JS and assets in debug mode
 *   bundleInDebug: false,
 *
 *   // whether to bundle JS and assets in release mode
 *   bundleInRelease: true,
 *
 *   // whether to bundle JS and assets in another build variant (if configured).
 *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
 *   // The configuration property can be in the following formats
 *   //         'bundleIn${productFlavor}${buildType}'
 *   //         'bundleIn${buildType}'
 *   // bundleInFreeDebug: true,
 *   // bundleInPaidRelease: true,
 *   // bundleInBeta: true,
 *
 *   // whether to disable dev mode in custom build variants (by default only disabled in release)
 *   // for example: to disable dev mode in the staging build type (if configured)
 *   devDisabledInStaging: true,
 *   // The configuration property can be in the following formats
 *   //         'devDisabledIn${productFlavor}${buildType}'
 *   //         'devDisabledIn${buildType}'
 *
 *   // the root of your project, i.e. where "package.json" lives
 *   root: "../../",
 *
 *   // where to put the JS bundle asset in debug mode
 *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
 *
 *   // where to put the JS bundle asset in release mode
 *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in debug mode
 *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in release mode
 *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
 *
 *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
 *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
 *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
 *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
 *   // for example, you might want to remove it from here.
 *   inputExcludes: ["android/**", "ios/**"],
 *
 *   // override which node gets called and with what additional arguments
 *   nodeExecutableAndArgs: ["node"],
 *
 *   // supply additional arguments to the packager
 *   extraPackagerArgs: []
 * ]
 */

project.ext.react = [
    enableHermes: false,  // clean and rebuild if changing
]

apply from: "../../node_modules/react-native/react.gradle"

/**
 * Set this to true to create two separate APKs instead of one:
 *   - An APK that only works on ARM devices
 *   - An APK that only works on x86 devices
 * The advantage is the size of the APK is reduced by about 4MB.
 * Upload all the APKs to the Play Store and people will download
 * the correct one based on the CPU architecture of their device.
 */
def enableSeparateBuildPerCPUArchitecture = false

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = false

/**
 * The preferred build flavor of JavaScriptCore.
 *
 * For example, to use the international variant, you can use:
 * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
 *
 * The international variant includes ICU i18n library and necessary data
 * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
 * give correct results when using with locales other than en-US.  Note that
 * this variant is about 6MiB larger per architecture than default.
 */
def jscFlavor = 'org.webkit:android-jsc:+'

/**
 * Whether to enable the Hermes VM.
 *
 * This should be set on project.ext.react and mirrored here.  If it is not set
 * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
 * and the benefits of using Hermes will therefore be sharply reduced.
 */
def enableHermes = project.ext.react.get("enableHermes", false);

android {
    ndkVersion rootProject.ext.ndkVersion

    compileSdkVersion rootProject.ext.compileSdkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    defaultConfig {
        applicationId "com.dialogy.shop.list"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            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:
            // https://developer.android.com/studio/build/configure-apk-splits.html
            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
            }

        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    //noinspection GradleDynamicVersion
    implementation "com.facebook.react:react-native:+"  // From node_modules

    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
    implementation project(':react-native-inappbrowser-reborn')
    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
      exclude group:'com.facebook.fbjni'
    }

    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
        exclude group:'com.squareup.okhttp3', module:'okhttp'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

Task :react-native-inappbrowser-reborn:compileReleaseJavaWithJavac FAILED /Users/alexandrsmirnov/Work/E-Orda/Colibri-mobile/node_modules/react-native-inappbrowser-reborn/android/src/main/java/com/proyecto26/inappbrowser/RNInAppBrowser.java:107: error: cannot find symbol builder.setNavigationBarColor(Color.parseColor(colorString)); ^ symbol: method setNavigationBarColor(int) location: variable builder of type Builder /Users/alexandrsmirnov/Work/E-Orda/Colibri-mobile/node_modules/react-native-inappbrowser-reborn/android/src/main/java/com/proyecto26/inappbrowser/RNInAppBrowser.java:116: error: cannot find symbol builder.setNavigationBarDividerColor(Color.parseColor(colorString)); ^ symbol: method setNavigationBarDividerColor(int) location: variable builder of type Builder 2 errors

The codebase of my project i handle it have some legacy code from RN Below 0.60, i tried to follow some suggestion such as update my Android Studio to the lastest stable version 4.2.2 and update the SDK and the gradle also, and then tried to only use the Android Support or Android X settings in the build.gradle file but it still same not fix my issue, the terminal always shows the error same as this post. And the error happened because the library get update to 3.6.1 version and works well in Version 3.4.0 ~ 3.5.1

@jdnichollsc yup i know it maybe some of you have a better way to solve this issue, but in my case the new release version 3.6.1 give an error to my App built with React Native Version 0.65.1 and i try to downgrade it to 3.4.0 and its work ☺

Finally the issue has been solved, i changed the version number from this “react-native-inappbrowser-reborn”: “^3.4.0” to this one “react-native-inappbrowser-reborn”: “3.4.0” and its compatible with my current RN Version 0.61.5 ( removed this ^ symbol )

@jdnichollsc did you found the best way to solve this issue ?

Oh and on the other hand, with Autolinking you don’t need to install this package manually 😃 https://github.com/mattop1709/agorgy/blob/main/android/app/build.gradle#L188

implementation project(‘:react-native-inappbrowser-reborn’)

image

Happy coding! ❤️

yeah just to ensure everything is according to the setup instruction…btw, thanks!

yeah, luckily somebody point this up…having this issue with react native version 0.64…