React-native-navigation: React native navigation issue on android with react-native 0.60.0

[arunpkumar92]

Hi Everyone,

I have an application with react native version 0.60.0 and i am using react-native-navigation .

"react": "16.8.6",
"react-native": "0.60.0",
"react-native-navigation": "^2.26.2",

I got issues when i build for android like below (also screenshot added)

error: cannot find symbol class MeasureSpecProvider
error: cannot find symbol class SizeMonitoringFrameLayout

My environment details

defaultConfig {
    applicationId "com.clubz"
    minSdkVersion rootProject.ext.minSdkVersion
    targetSdkVersion rootProject.ext.targetSdkVersion
    versionCode 1
    versionName "1.0"
    missingDimensionStrategy "RNN.reactNativeVersion", "reactNative57_5" // See note below!

}

subprojects { subproject ->
    afterEvaluate {
        if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
            android {
                variantFilter { variant ->
                    def names = variant.flavors*.name
                    // To check for a certain build type, use variant.buildType.name == "<buildType>"
                    if (names.contains("reactNative51") || names.contains("reactNative55")) {
                        // Gradle ignores any variants that satisfy the conditions above.
                        setIgnore(true)
                    }
                }
            }
        }
    }
}

Thanks in advance

[jinshin1013]

RNN@v2 doesn't support React Native 0.60.0, you can though use the RNN@v3 alpha version.

[ItsNoHax]

Please use the alpha version of RNN to support RN 0.60.0

[levynir]

Still not working

$ fgrep \"react-native\" package.json 
    "react-native": "^0.60.4",

$ npm install react-native-navigation@snapshot
+ [email protected]
removed 2 packages, updated 1 package and audited 950255 packages in 10.614s
found 0 vulnerabilities

$ npx react-native run-android
/development/app/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
/development/app/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
/development/app/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
/development/app/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: /development/app/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

FAILURE: Build failed with an exception.

[guruparan]

The alpha version thats currently available (3.0.0-alpha.11-snapshot.451) does not support RN 60. But the required changes are there in the V3 branch. @guyca any idea on when these changes be available via npm ?

[levynir]

Can someone please re-open this issue until it is resolved in a snapshot?

[Stalder]

Hi everyone, I don't know what kind of troubles people have with RNN Android setup on 0.60. I've successfully linked RNN with React Native 0.60.5, and it works fine on IOS. However, I have an issue on Android: there is a blank screen after push in ~60% of cases. May it be fixed by migration to v3 alpha?

[guruparan]

This issue is fixed on 3.0.0-snapshot.460
you will have to set
missingDimensionStrategy "RNN.reactNativeVersion", "reactNative60"
also do the below change
if (names.contains("reactNative51") || names.contains("reactNative55") || names.contains("reactNative56")|| names.contains("reactNative57")|| names.contains("reactNative57_5")) {
setIgnore(true)
}

[Stalder]

@guruparan Thank you for your response. I've upgraded RNN version to 3.1.0 and added this to 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")|| names.contains("reactNative57_5")) {
                        setIgnore(true)
                    }
                }
            }
        }
    }
}

The line missingDimensionStrategy "RNN.reactNativeVersion", "reactNative60" was already in android/app/build.gradle. However, I still have an issue with blank screen after push. Caches are cleaned and app removed & installed again

[guruparan]

@Stalder this thread is on a different issue which is related to build. i upgraded from RNN V2 to RNN V3 and didnt have any issues, its better if you can open the white screen issue separately.

[GuillaumeAmat]

Hello @guruparan , I'm having the same issue with RN 0.60.5 and RNN 3.1.0.

I added:

subprojects { subproject ->
    afterEvaluate {
        if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
            android {
                variantFilter { variant ->
                    def names = variant.flavors*.name
                    // To check for a certain build type, use variant.buildType.name == "<buildType>"
                    if (names.contains("reactNative51") || names.contains("reactNative55") || names.contains("reactNative56")|| names.contains("reactNative57")|| names.contains("reactNative57_5")) {
                        // Gradle ignores any variants that satisfy the conditions above.
                        setIgnore(true)
                    }
                }
            }
        }
    }
}

... at the end of android/app/build.gradle but the build still fails.

[GuillaumeAmat]

Oh... Just saw in https://github.com/wix/react-native-navigation/issues/5171#issuecomment-515179780 that it was the wrong build.gradle file...

The issue is solved if we put:

subprojects { subproject ->
    afterEvaluate {
        if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
            android {
                variantFilter { variant ->
                    def names = variant.flavors*.name
                    // To check for a certain build type, use variant.buildType.name == "<buildType>"
                    if (names.contains("reactNative51") || names.contains("reactNative55") || names.contains("reactNative56")|| names.contains("reactNative57")|| names.contains("reactNative57_5")) {
                        // Gradle ignores any variants that satisfy the conditions above.
                        setIgnore(true)
                    }
                }
            }
        }
    }
}

... at the end of android/build.gradle, not android/app/build.gradle.

[ukie]

It seems like React Navigation 4.x is not compatible with React Native 0.60.x (I've tried on 0.60.5 and after running the requried

yarn add react-native-reanimated react-native-gesture-handler react-native-screens

the project build fails, so I cannot even deploy the app to device

[jinshin1013]

@ukie I think you are in the wrong repo. You probably meant to go here