React-native-navigation: Error with react native navigation on new react-native-0.60.3

[udhaymanhas]

Issue Description

Using new react native 0.60.3 and running npm run android throws the below error:

> Task :react-native-navigation:compileReactNative57_5DebugJavaWithJavac
/node_modules/react-native-navigation/lib/android/app/src/reactNative57_5/java/com/reactnativenavigation/react/SyncUiImplementation.java:13: error: cannot find symbol
import com.facebook.react.uimanager.common.MeasureSpecProvider;
                                          ^
  symbol:   class MeasureSpecProvider
  location: package com.facebook.react.uimanager.common
/node_modules/react-native-navigation/lib/android/app/src/reactNative57_5/java/com/reactnativenavigation/react/SyncUiImplementation.java:14: error: cannot find symbol
import com.facebook.react.uimanager.common.SizeMonitoringFrameLayout;
                                          ^
  symbol:   class SizeMonitoringFrameLayout
  location: package com.facebook.react.uimanager.common
/node_modules/react-native-navigation/lib/android/app/src/reactNative57_5/java/com/reactnativenavigation/react/SyncUiImplementation.java:78: error: cannot find symbol
    public <T extends SizeMonitoringFrameLayout & MeasureSpecProvider> void registerRootView(T rootView, int tag, ThemedReactContext context) {
                      ^
  symbol:   class SizeMonitoringFrameLayout
  location: class SyncUiImplementation
/node_modules/react-native-navigation/lib/android/app/src/reactNative57_5/java/com/reactnativenavigation/react/SyncUiImplementation.java:78: error: cannot find symbol
    public <T extends SizeMonitoringFrameLayout & MeasureSpecProvider> void registerRootView(T rootView, int tag, ThemedReactContext context) {
                                                  ^
  symbol:   class MeasureSpecProvider
  location: class SyncUiImplementation
Note: /node_modules/react-native-navigation/lib/android/app/src/reactNative57_5/java/com/reactnativenavigation/react/SyncUiImplementation.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
4 errors

> Task :react-native-navigation:compileReactNative57_5DebugJavaWithJavac FAILED

FAILURE: Build failed with an exception.

Steps to Reproduce / Code Snippets / Screenshots

npm run android

android/app/build.gradle

android {
    compileSdkVersion rootProject.ext.compileSdkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    defaultConfig {
        applicationId "com.test"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        missingDimensionStrategy "RNN.reactNativeVersion", "reactNative57_5"
        versionCode 1
        versionName "1.0"
    }
    ...

android/build.gradle

subprojects { subproject ->
    afterEvaluate {
        if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) 
            android {
                variantFilter { variant ->
                        def names = variant.flavors*.name
                        if (names.contains("reactNative51") || names.contains("reactNative55") || names.contains("reactNative56") || names.contains("reactNative57")) {
                        // Gradle ignores any variants that satisfy the conditions above.
                        setIgnore(true)
                    }
                }
            }
        }
    }

---

Environment

• React Native Navigation version: 2.22.3
• React Native version: 0.60.3
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): NEXUS 5X API 28 x86

[Nemferno]

Duplicate of #5273

[Nemferno]

I had the same problem. The issue I mentioned has helped me resolved the issue.

[Frekansapp]

use v3 alpha

[skippone]

Unfortunately v3 alpha is not being built from current /v3 branch. The latest alpha build is for example missing reactNative60 flavour for Android (present in /v3 branch) and as such is not working with RN 0.60 (on Android).

Could anyone please make v3 alpha build with the latest sources?

[skippone]

Unfortunately v3 alpha is not being built from current /v3 branch. The latest alpha build is for example missing reactNative60 flavour for Android (present in /v3 branch) and as such is not working with RN 0.60 (on Android).

Could anyone please make v3 alpha build with the latest sources?

Fixed with v3 alpha.8 release, thanks...

[shankarGdev]

In RNN 3.0.0-alpha.8 and RN 0.60.4 getting the same error with
missingDimensionStrategy "RNN.reactNativeVersion", "reactNative57_5"

is there any quick workaround?

[Charlynux]

@iShankarG
Did you try to change for reactNative60 as suggests for @skippone ?
It works for me.

missingDimensionStrategy "RNN.reactNativeVersion", "reactNative60"

[loga4]

It works for me:

missingDimensionStrategy "RNN.reactNativeVersion", "reactNative60"

android/build.gradle

 afterEvaluate {
        if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
            android {
                compileSdkVersion rootProject.ext.compileSdkVersion
                buildToolsVersion rootProject.ext.buildToolsVersion

                variantFilter { variant ->
                    def names = variant.flavors*.name
                    if (
                            names.contains("reactNative51") ||
                            names.contains("reactNative55") ||
                            names.contains("reactNative56") ||
                            names.contains("reactNative57") ||
                            names.contains("reactNative57_5")
                    ) {
                        setIgnore(true)
                    }
                }
            }
        }
    }

[DanDance]

I have RN 60.4. react-native-navigation is currently installed 3.0.0-alpha.7-snapshot.434
With advices above I don't have import com.facebook.react.uimanager.common.MeasureSpecProvider; error anymore.

But still have error: package com.reactnativenavigation does not exist import com.reactnativenavigation.NavigationApplication;.

settings.gradle:

rootProject.name = 'UserApp'
include ':react-native-navigation'
project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/lib/android/app/')
include ':@mauron85_react-native-background-geolocation-common'
project(':@mauron85_react-native-background-geolocation-common').projectDir = new File(rootProject.projectDir, '../node_modules/@mauron85/react-native-background-geolocation/android/common')
include ':@mauron85_react-native-background-geolocation'
project(':@mauron85_react-native-background-geolocation').projectDir = new File(rootProject.projectDir, '../node_modules/@mauron85/react-native-background-geolocation/android/lib')
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
include ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
include ':react-native-device-info'
project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')
include ':react-native-dialogs'
project(':react-native-dialogs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dialogs/android')
include ':@react-native-community_async-storage'
project(':@react-native-community_async-storage').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/async-storage/android')


apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'

android/build.gradle:

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

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 19
        compileSdkVersion = 28
        targetSdkVersion = 28
        supportLibVersion = "27.1.1"
    }
    repositories {
        jcenter()
        google()
        mavenLocal()
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.4.1'

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

allprojects {
    repositories {
        google()
        mavenCentral()
        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")
        }

        maven { url 'https://jitpack.io' }

        jcenter()
    }
}

subprojects { subproject ->
    afterEvaluate {
        if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
            android {
                compileSdkVersion rootProject.ext.compileSdkVersion
                buildToolsVersion rootProject.ext.buildToolsVersion

                variantFilter { variant ->
                    def names = variant.flavors*.name
                    if (
                            names.contains("reactNative51") ||
                            names.contains("reactNative55") ||
                            names.contains("reactNative56") ||
                            names.contains("reactNative57") ||
                            names.contains("reactNative57_5")
                    ) {
                        setIgnore(true)
                    }
                }
            }
        }
    }
}


wrapper {
    gradleVersion = '4.4'
    distributionUrl = distributionUrl.replace("bin", "all")
}

app/build.gradle:

apply plugin: "com.android.application"

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
 *   entryFile: "index.android.js",
 *
 *   // 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 = [
    entryFile: "index.js"
]

apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.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

android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion

    defaultConfig {
        applicationId "com.gwheels.userapp"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 18
        versionName "1.5.3"
        missingDimensionStrategy "RNN.reactNativeVersion", "reactNative60"
        multiDexEnabled true
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
        debug {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            signingConfig signingConfigs.release
        }
    }
    // 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
            }
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {
    implementation project(':@mauron85_react-native-background-geolocation')
    implementation project(':react-native-dialogs')
    implementation project(':react-native-device-info')
    implementation project(':react-native-code-push')
    implementation project(':@react-native-community_async-storage')
    implementation project(':react-native-maps')
    implementation 'com.google.android.gms:play-services-plus:16.0.0'
    implementation 'com.google.android.gms:play-services-location:16.0.0'
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:design:${rootProject.ext.supportLibVersion}"
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.android.support:support-v4:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
    implementation project(':react-native-navigation')
    implementation 'com.android.support:design:27.1.0'
}

// 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)

why still it can't see com.reactnativenavigation... package? Tried to reinstall dependencies by removing node_modules and yarning again. Stuck for second day... Will inform if I will have any progress. Thanks.

[Nemferno]

Try updating to the latest version RNN 3.0.0-alpha.11. If that doesn't solve the issue, I would suggest making a new react-native project and install RNN to see if you are doing the correct steps.

I'm using RNN 3.0.0-alpha.2 and it has been working fine for me. I wouldn't suggest downgrading but if that may solve your issue, by all means.

[DanDance]

Updating to 3.0.0-alpha.11 solved my issue, thanks!

[ollydixon]

I updated to version 3.1.0 and I get the following.

StackLayout.java:16: error: cannot access NestedScrollingParent3
public class StackLayout extends CoordinatorLayout implements Component {
       ^
  class file for androidx.core.view.NestedScrollingParent3 not found

Also the version 3 installation instructions are completely different to v2, is this normal?

I also noticed that version rnn-2 doesn't have support for version rn-60. Are we just abandoning version 2 now?

I've forced to update from version 1 on this project cause of the AndroidX crap.

[Nemferno]

Are you using jetifier before you build your project? Jetifier converts all dependencies that are using pre-AndroidX libraries to AndroidX.

[svenlombaert]

Is it actually possible to use RNN v2 with RN 0.60? We had to upgrade to RN 0.60, but I don't want to use an alpha version of RNN. We're using jetifier which works great for all the other dependencies which do not support RN 0.60 yet, but doesn't seem to work for RNN..

[andresfcamacho]

@svenlombaert Were you able to get RNN 2.X working with RN 60? We're having a bunch of issues with RNN 3.1.X and I'm wondering if we should even try to go back just for RNN.

[svenlombaert]

We upgraded to RNN 3.1.X. The issues we run into are actually the same ones we had using v2 of RNN.. But it does work with react-native 0.60.x!

[andresfcamacho]

Thanks! I'll give downgrading to V2 a try.

On Fri, Sep 6, 2019 at 3:33 PM Sven Lombaert [e-mail]
wrote:

We upgraded to RNN 3.1.X. The issues we run into are actually the same
ones we had using v2 of RNN.. But it does work with react-native 0.60.x!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/wix/react-native-navigation/issues/5282?email_source=notifications&email_token=AABZ7LWFVO55U6PJDOWXTILQILLFDA5CNFSM4IDBE562YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6EHEKQ#issuecomment-529035818,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABZ7LXHUV2IAU7K62LLFPTQILLFDANCNFSM4IDBE56Q
.

[jonaslimads]

I confirm that for me react-native-0.60+ required RNN 3+ to work. My steps:

yarn add react-native-navigation@^3.2.0
cd android && ./gradlew clean

Then follow steps explained here https://wix.github.io/react-native-navigation/#/docs/Installing?id=android, then the build could be done with.

cd .. && npx jetify
cd android && ./gradlew app:assembleDebug

Some users may face this error:

> Task :app:transformDexArchiveWithExternalLibsDexMergerForDebug FAILED
D8: Cannot fit requested classes in a single dex file (# methods: 66316 > 65536)

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'.
> com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives: 
  The number of method references in a .dex file cannot exceed 64K.
  Learn how to resolve this issue at https://developer.android.com/tools/building/multidex.html

go to android/app/build.gradle and add and rebuild:

android {
  ...
  defaultConfig {
     ...
     multiDexEnabled true
  }
  dependencies {
    ...
    implementation 'com.android.support:multidex:1.0.3'
  }
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[AakashHussain]

I confirm that for me react-native-0.60+ required RNN 3+ to work. My steps:

yarn add react-native-navigation@^3.2.0
cd android && ./gradlew clean

Then follow steps explained here https://wix.github.io/react-native-navigation/#/docs/Installing?id=android, then the build could be done with.

cd .. && npx jetify
cd android && ./gradlew app:assembleDebug

Some users may face this error:

> Task :app:transformDexArchiveWithExternalLibsDexMergerForDebug FAILED
D8: Cannot fit requested classes in a single dex file (# methods: 66316 > 65536)

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'.
> com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives: 
  The number of method references in a .dex file cannot exceed 64K.
  Learn how to resolve this issue at https://developer.android.com/tools/building/multidex.html

go to android/app/build.gradle and add and rebuild:

android {
  ...
  defaultConfig {
     ...
     multiDexEnabled true
  }
  dependencies {
    ...
    implementation 'com.android.support:multidex:1.0.3'
  }
}

worked for me thanks