React-native-navigation: v3 alpha [05/08 alpha.11 published]

[guyca]

3.0.0-alpha.11

Changes

• [x] Support RN 0.60
• [x] Migrate to AndroidX
• [x] Improve draw behind StatusBar (Preparation for #4258)
• [x] Don't push BottomTabs when keyboard is displayed (Fixes #4005, #3424)
  - It won't be needed to toggle the BottomTabs when Keyboard is visible
• [x] BottomTab badge and dot indicator are not animated by default on Android (parity with iOS)

Updating from v2

v3 is currently in alpha. To update simply npm install 3.0.0-alpha.11 - npm install --save [email protected].
Breaking changes are outlined below.

Layout system changes on Android

• Parent layouts (BottomsTabs, Stack, SideMenu) are always laid out behind the StatusBar.
• Components (component and externalComponent) are measured and offset according to the StatusBar.

In this release, We're changing the layout system in order to provide better support for immersive and full screen apps. In this release we've improved support for drawing behind the StatusBar, next we'll address drawing behind the NavigationBar.

Use the drawBehind and translucent options to control the StatusBar

statusBar: {
  drawBehind: true,  // will draw a screen behind the StatusBar
  translucent: true // Usually you'll want to have drawBehind: true when this is true
}

While this isn't a breaking API change - there are a few breaking side effects.

How will my app be effected

1. When the keyboard is opened, BottomTabs will now be drawn behind the keyboard and won't shift upwards. This is in parity with the current behaviour in iOS. For the most part, this isn't a breaking change. Toggling BottomTabs when TextInput's focus changes won't be needed anymore.

2. Update: Fixed in 3.0.0-alpha.1
   If you've specified a custom TopBar animation which animates y or translationY properties, you'll need to compensate for the TopBar's topMargin. This is a temporary solution and will be addressed in one of the next alpha releases.
   For example:

const statusBarHeight = getStatusBarHeight();
const topBarHeight = getTopBarHeight();
...
pop: {
  topBar: {
    enabled: true,
    y: {
      duration: 300,
      from: statusBarHeight,
      to: -topBarHeight + statusBarHeight
    }
  }
}

1. While parent controllers are drawn behind the StatusBar, their background isn't.
   This means that when transitioning from a destinations drawn under the StatusBar to a destination drawn behind it, the application's default background color will be visible behind the StatusBar.
   If you application's theme is dark, you might want to change the windowBackground property to mitigate this:

Add the following to your application's style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@color/backgroundColor</item>
    </style>

    <!--This is your application's default background color.
    It will be visible when the app is first opened (while the splash layout is visible)
    and when transitioning between a destination a screen drawn under the StatusBar to
    a destination drawn behind it-->
    <item name="backgroundColor" type="color">#f00</item>
</resources>

AndroidX migration

We've migrated RNN to AndroidX, please follow migration instructions in the react-native repo.

Removed SyncUiImplementation

SyncUiImplementation was used to overcome a bug in RN's UiImplementation. This workaround was added to RN's UiImplementation in RN 0.60 (thanks @SudoPlz) and can be removed from RNN.

If you're using SyncUiImplementation your app will fail to compile after upgrading to v3. Simply remove the following code from your MainApplication.java

- import com.facebook.react.uimanager.UIImplementationProvider;
- import com.reactnativenavigation.react.SyncUiImplementation;


- @Override
- protected UIImplementationProvider getUIImplementationProvider() {
-     return new SyncUiImplementation.Provider();
- }

BottomTab badge and dot indicator are not animated by default on Android (parity with iOS)

Showing and hiding badge and dot indicator are now not animated by default. Badge animation is now controlled with the bottomTab.animateBadge property and dot indicator with bottomTab.dotIndicator.animate property.

The following option will show a badge with animation

bottomTab: {
  badge: 'new,
  animateBadge: true
}

The following option will show a dot indicator with animation

bottomTab: {
  dotIndicator: {
    visible: true,
    animate: true
  }
}

[syedabuthahirm]

HI @guyca can you look at TopTabs issues.
Currently V2 TopTabs doesn't support following options compared to v1.

• selectedTopTabIndicatorHeight

• selectedTopTabIndicatorColor

• topTabsScrollable

• topTabsHeight

Related Issues #5213, #5202, #4485, #5072.

Can we resolve this in V3?

[mayconmesquita]

@guyca would be nice have topTabs working in this v3.
I'm using a cross solution provided by Native Base, but has a poor perfomance.

By the way, great work you doing here!

[Crisis2010]

Hi, @guyca! Can you please look at iOS issues with topBar, especially with largeTitle enabled.
There is too many bug with it, with merge options and animations. I showed some of them in issue #5145.

Thanks!

[t1amat9409]

@mayconmesquita I stopped using Native Base for that same reason... Now I'm relying on react-navigation for tabs, and mixing the two isn't a good practice I think... and the performance is just a piece of junk...

[Crisis2010]

And how about add feature not to hide topBar like hideOnScroll option but just change opacity on scrolling down from 0 _(transparent)_ to 100%?

[guyca]

TopTabs - I'm terribly sorry for our lack of support for this component. We're just not getting to it. If anyone would like to take ownership of it please contact me.
Our support for SideMenu was also lacking and we're only now slowly fixing its issue.

@Crisis2010 I doubt that will be implemented, sounds like a specific use case which you can implement without performance impact on your own.
Regarding large titles - I'm aware there are issues with it, I hope to address them this quarter.

[pontusab]

I would love to fix the issue with Keyboard flickering when pushing screen with an input that has auto-focus. https://github.com/wix/react-native-navigation/issues/2622 is there something that comes to mind what the issue can be? I will try to fix it tonight.

[guyca]

@pontusab Strange, I see we use autoFocus: true in quite a few places in the Wix app and never had issues with it 🤔

[pontusab]

@guyca Interesting! We have the same issue with 3 different apps and then the folks in the GitHub issue. Do you use waitForRender? and/or something else? In your app, is the keyboard visible directly on navigate? I will do a small repo with an example

[guyca]

@pontusab We don't use waitForRender.

[mayconmesquita]

@guyca The TopTabs is android-only or iOS too? I can take the ownership to help the Android support.

[syedabuthahirm]

@mayconmesquita Thanks for taking ownership. i already did some research on TopTabs Styles in the following issue #5202, #5072 (Those are already implemented V1 I think you can easily copy paste them). Tab Layout Native Code It maybe useful to you.

[mayconmesquita]

@syedabuthahirm thanks for the research! It will be useful to start!

[AbanoubNassem]

hopefully it fixes this issue #5167

[guyca]

@mayconmesquita TopTabs are implemented on both platforms. Contact me on Discord and I'd be happy to assist as much as I can 👍

[kamleshh-bms]

@guyca Please add system default navigation transition when pushing screen on Android. Currently, It has the bottom to top transition.

[svenlombaert]

Feel a d*ck for hijacking this issue a bit, but any chance this will be looked at? It only happens when using a SideMenu.
https://github.com/wix/react-native-navigation/issues/5192

Literally zero reaction. A "we don't know either", or a small push to a possible solution would already be a great help. This is basically holding us from using native navigation in production.

[pribeh]

@guyca considering there's a focus on full-screen apps in the new version, is there any chance you could consider the following request which you've looked at before:

https://github.com/wix/react-native-navigation/issues/4866

Our app is mostly fullscreen but requires setting mergeoptions on every screen (componentdidappear) to ensure when an overlay displays that it doesn't override the statusbar styling. I haven't figured out another way around it.

[guyca]

@pribeh I don't think this will be part of the fullscreen effort, but we already discussed this internally and will try to find a solution this quarter.

[guyca]

Anyone using RN 0.60 - I'd appreciate if you could upgrade to 3.0.0-alpha.2 and let me know if you find any issues (Or don't have any 😄 )

[Frekansapp]

@guyca i'am trying to use RN 0.60 but i'm getting error could you please check out this issue https://github.com/react-native-community/cli/issues/467

[darknblack]

Anyone using RN 0.60 - I'd appreciate if you could upgrade to 3.0.0-alpha.2 and let me know if you find any issues (Or don't have any 😄 )

I'm trying to make it work but I can't find any documentation similar to RNN V2 :( maybe you can provide the step by step. It would be a big help to us.

[thecodrr]

@guyca v3.0.0-alpha.2 doesn't have a reactNative60 folder due to which nothing works. Check this tag

[guyca]

@theweavrs That snapshot tag is incorrect. Use npm pack [email protected] to view the contents of the version - you'll see it includes reactNative60 folder 👍

[Frekansapp]

@guyca i managed to run with RN 0.60.0 but i have a problem with layout. My modals go to under of status bar when i'm open them. I'm using custom topbar here is my default settings.

    Navigation.setDefaultOptions({
        topBar: {
            visible: false,
            height: 0
        },

        statusBar: {
            style: 'light',
            drawBehind:false
        },
        layout: {
            orientation: ['portrait'],

        },
        bottomTabs: {
            titleDisplayMode: 'alwaysHide',
            animate: true,

        },

        blurOnUnmount:true,
        bottomTab: {

            textColor: 'gray',
            selectedTextColor: '#3C5898',
            iconColor: 'gray',
            selectedIconColor: '#3C5898',
        }
    });

[guyca]

@frankenthumbs Please reproduce in the playground app

[Frekansapp]

Who is frankenthumbs?

[guyca]

I meant you.. wrong mention..

[syedabuthahirm]

@mayconmesquita Is there any process going on Toptabs?

[t1amat9409]

Any new developments on toptabs?

[guyca]

No, we're not working on TopTabs and don't plan to any time soon 😕

[danilobuerger]

@guyca Found a bug in v3 -> https://github.com/wix/react-native-navigation/pull/5268

[harveyconnor]

I'm having an issue on iOS where if I add left button components. They are not vertically aligned in the middle. The only solution is to put a (-) negative margin (.e.g marginTop: -10).
See example:

[TiagoCoelhoB]

Do you already know when the version 3.0.0-alpha.2 can be considered as stable?

[cassioseffrin]

Do you have an estimation term when the RNN3 stable version will be released?

I have been testing the RNN v3.0.0-alpha.2 with RN0.60, the app works fine in debug mode (for android). I followed the same installations instructions available in docs of v2, however It's only work in debug mode. When i run in release with: "react-native run-android --variant=release" the app crashes when start and I cannot figure out what's the cause. Even running in android studio debug mode. All I can see is the application was terminated. Any clue will be appreciated?

[Quadriphobs1]

I had tried installing this but I keep getting a red background on android with react-native": "0.60.2", when the app startup, is that suppose to be an error, I don't know

[guyca]

@cassioseffrin @TiagoCoelhoB It's actually stable. There's a known issue I'm aware of with a pending PR which I'll get to this week, then publish a beta.
I haven't tested it in release, I'll do so this week as well.

[danilobuerger]

@guyca Found another Bug in v3: https://github.com/wix/react-native-navigation/issues/5285

[yassinebridi]

Do you have an idea of how much time it is gonna be ready, i can't downgrade RN because i'm using hermes.
i figured i will use another solution until RNN V3 is ready.

[karlvr]

@guyca v3a2 working well for me. I have seen one issue on Android where you can scroll the top bar off the top of the screen; easiest reproduced in simulator with mouse point, just click and drag in the top bar and off it goes and you can't get it back.

I see it when using a side menu and when not.

I also see the topbar being half off the screen when pushing a component that has a visible topbar from one that doesn't.

If these issues aren't obvious, let me know and I'll prepare examples.

[guyca]

@karlvr Both issues should be fixes in .alpha-4 - Thanks for reporting 👍

[solonifer]

When using setDefaultOptions currentTabIndex on android, tabs becomes untouchable and stack on currentTabIndex tab

[yfuks]

Hi @guyca thanks for the great work !
having an issue with alpha.8.
On android the sideMenu visibility is broken after showing a modal.

Use case:

Navigation.setRoot(...)
Navigation.showModal(...)
Navigation.dismissModal(...)
Navigation.mergeOptions(..., { sideMenu: left: { visible: true } }) // broken

The background opacity of the sideMenu is showing but not the actual sideMenu.
Opening sideMenu with touch is working fine.
Opening sideMenu before showModal is also working fine.

The issue is happening on release and debug but not on all devices.

If you need further informations let me know.

EDIT: Was only able to reproduce on a ONE PLUS API 9
EDIT2: Same issue as https://github.com/wix/react-native-navigation/issues/5311

[cesarm16]

i follow the playground example for installation on RN: 0.60.4 RNNv3 alpha 8 and none of the native components that should autolink works, not event in a new project.

EDIT: Only on android
Edit2: Forget it. Solved.

[Alewex]

@cesarm16 Ok, don't be that guy, how did you solve it?

[TylerNRobertson]

Just curious if setRoot animations are planned in V3? Their in the documentation but I've never had them work.

[flikQ]

Hey, great work getting v3 out into alpha, can I ask when v4 will be ready?

[karlvr]

@Alewex @cesarm16 I had a problem with Android not installing correctly. No idea if it was the same issue; mine was I had a ^ dependency on react-native-navigation and it was installing alpha.7.snapshot something. Changing to depend on alpha 8 specifically resolved my problem building ¯_(ツ)_/¯

[cesarm16]

@Alewex I change createAdditionalReactPackages() function on MainApplication.java like this:

public List<ReactPackage> createAdditionalReactPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
    // packages.add(new MyReactNativePackage());
    return packages;
}

dont forget to import com.facebook.react.PackageList;

[congnguyen91]

+1 for auto-linking guide :)

[aniciom]

I'm having an issue compiling for release, using alpha-8 in rn 0.60.4 when i try to assemble (eventhough i configured the build.gradle with reactNative60's flavor), for debug its compiling fine.

 Exception is:
org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':react-native-navigation:compileReactNative51ReleaseJavaWithJavac'.
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter$3.accept(ExecuteActionsTaskExecuter.java:151)
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter$3.accept(ExecuteActionsTaskExecuter.java:148)
        at org.gradle.internal.Try$Failure.ifSuccessfulOrElse(Try.java:191) ....

For what i've seen, compileReactNative60ReleaseJavaWithJavac its been generated also for release but it reachs first 51 and then it crashes everything.

This my is build.gradle I added the RNN 0.60 flavour and ignored the rest i've no idea whats going on anyone can help me?

Thanks

apply plugin: "com.android.application"

import com.android.build.OutputFile

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

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

def enableSeparateBuildPerCPUArchitecture = true

def enableProguardInReleaseBuilds = true

def jscFlavor = 'org.webkit:android-jsc:+'

def enableHermes = project.ext.react.get("enableHermes", false);

android {
    compileSdkVersion rootProject.ext.compileSdkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    defaultConfig {
        applicationId "com.rndchat060"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        missingDimensionStrategy "RNN.reactNativeVersion", "reactNative60"
        versionCode 1
        versionName "1.0"
        multiDexEnabled true
    }
    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 {
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            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 =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }

        }
    }

    packagingOptions {
        pickFirst '**/armeabi-v7a/libc++_shared.so'
        pickFirst '**/x86/libc++_shared.so'
        pickFirst '**/arm64-v8a/libc++_shared.so'
        pickFirst '**/x86_64/libc++_shared.so'
        pickFirst '**/x86/libjsc.so'
        pickFirst '**/armeabi-v7a/libjsc.so'
    }
}

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

    if (enableHermes) {
      def hermesPath = "../../node_modules/hermesvm/android/";
      debugImplementation files(hermesPath + "hermes-debug.aar")
      releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
      implementation jscFlavor
    }
}
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)

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

This is also happening in alpha-2 and 7

---

UPDATE:
Quick and Dirty temporary solution for those whose are getting the same error and are using rn 0.60+

edit build.gradle from the library and leave only

productFlavors {
reactNative60 {
dimension "RNN.reactNativeVersion"
buildConfigField("int", "REACT_NATVE_VERSION_MINOR", "60")
}
}

Since its a release for react native 0.60+ doesnt make much sense to leave the other options

Remove the comparisons into the app/build.gradle, leaving only the missingDimensionStrategy value.

I hope the documentation and patch be ready soon for this.

[loga4]

iOS
rn 0.60.4
rnn 3.0.0-alpha.8

some bug with statusBar on v3 (v2 is ok)

Counter was moved up by top: -10

try to set by Navigation.setDefaultOptions({statusBar:{drawBehind: true, translucent: true}})
or by options func in component - don't work

[veraldo]

{statusBar: {style: 'dark'}} is not working on android

[cesarm16]

@veraldo Update to alpha8, it was happening to me.

[jfrolich]

Any plans to make iOS 13 style modals work in this package?

[mrquanghuy]

Unable to find a matching variant of project :react-native-navigation: - Variant 'reactNative51DebugApiElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attributes: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative51'. - Required org.gradle.usage 'java-runtime' and found incompatible value 'java-api'. - Other attributes: - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'. - Found com.android.build.api.attributes.VariantAttr 'reactNative51Debug' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Variant 'reactNative51DebugRuntimeElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attribute: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative51'. - Other attributes: - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'. - Found com.android.build.api.attributes.VariantAttr 'reactNative51Debug' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'. - Variant 'reactNative51ReleaseApiElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attributes: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative51'. - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found incompatible value 'release'. - Required org.gradle.usage 'java-runtime' and found incompatible value 'java-api'. - Other attributes: - Found com.android.build.api.attributes.VariantAttr 'reactNative51Release' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Variant 'reactNative51ReleaseRuntimeElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attributes: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative51'. - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found incompatible value 'release'. - Other attributes: - Found com.android.build.api.attributes.VariantAttr 'reactNative51Release' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'. - Variant 'reactNative55DebugApiElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attributes: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative55'. - Required org.gradle.usage 'java-runtime' and found incompatible value 'java-api'. - Other attributes: - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'. - Found com.android.build.api.attributes.VariantAttr 'reactNative55Debug' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Variant 'reactNative55DebugRuntimeElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attribute: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative55'. - Other attributes: - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'. - Found com.android.build.api.attributes.VariantAttr 'reactNative55Debug' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'. - Variant 'reactNative55ReleaseApiElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attributes: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative55'. - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found incompatible value 'release'. - Required org.gradle.usage 'java-runtime' and found incompatible value 'java-api'. - Other attributes: - Found com.android.build.api.attributes.VariantAttr 'reactNative55Release' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Variant 'reactNative55ReleaseRuntimeElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attributes: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative55'. - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found incompatible value 'release'. - Other attributes: - Found com.android.build.api.attributes.VariantAttr 'reactNative55Release' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'. - Variant 'reactNative56DebugApiElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attributes: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative56'. - Required org.gradle.usage 'java-runtime' and found incompatible value 'java-api'. - Other attributes: - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'. - Found com.android.build.api.attributes.VariantAttr 'reactNative56Debug' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Variant 'reactNative56DebugRuntimeElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attribute: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative56'. - Other attributes: - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'. - Found com.android.build.api.attributes.VariantAttr 'reactNative56Debug' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'. - Variant 'reactNative56ReleaseApiElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attributes: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative56'. - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found incompatible value 'release'. - Required org.gradle.usage 'java-runtime' and found incompatible value 'java-api'. - Other attributes: - Found com.android.build.api.attributes.VariantAttr 'reactNative56Release' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Variant 'reactNative56ReleaseRuntimeElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attributes: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative56'. - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found incompatible value 'release'. - Other attributes: - Found com.android.build.api.attributes.VariantAttr 'reactNative56Release' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'. - Variant 'reactNative57DebugApiElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attributes: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative57'. - Required org.gradle.usage 'java-runtime' and found incompatible value 'java-api'. - Other attributes: - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'. - Found com.android.build.api.attributes.VariantAttr 'reactNative57Debug' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Variant 'reactNative57DebugRuntimeElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attribute: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative57'. - Other attributes: - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'. - Found com.android.build.api.attributes.VariantAttr 'reactNative57Debug' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'. - Variant 'reactNative57ReleaseApiElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attributes: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative57'. - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found incompatible value 'release'. - Required org.gradle.usage 'java-runtime' and found incompatible value 'java-api'. - Other attributes: - Found com.android.build.api.attributes.VariantAttr 'reactNative57Release' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Variant 'reactNative57ReleaseRuntimeElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attributes: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative57'. - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found incompatible value 'release'. - Other attributes: - Found com.android.build.api.attributes.VariantAttr 'reactNative57Release' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'. - Variant 'reactNative57_5DebugApiElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attributes: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative57_5'. - Required org.gradle.usage 'java-runtime' and found incompatible value 'java-api'. - Other attributes: - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'. - Found com.android.build.api.attributes.VariantAttr 'reactNative57_5Debug' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Variant 'reactNative57_5DebugRuntimeElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attribute: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative57_5'. - Other attributes: - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'. - Found com.android.build.api.attributes.VariantAttr 'reactNative57_5Debug' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'. - Variant 'reactNative57_5ReleaseApiElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attributes: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative57_5'. - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found incompatible value 'release'. - Required org.gradle.usage 'java-runtime' and found incompatible value 'java-api'. - Other attributes: - Found com.android.build.api.attributes.VariantAttr 'reactNative57_5Release' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Variant 'reactNative57_5ReleaseRuntimeElements' capability Bibabo:react-native-navigation:unspecified: - Incompatible attributes: - Required RNN.reactNativeVersion 'reactNative60' and found incompatible value 'reactNative57_5'. - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found incompatible value 'release'. - Other attributes: - Found com.android.build.api.attributes.VariantAttr 'reactNative57_5Release' but wasn't required. - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'. - Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'.

I'm have problem with RN 0.6.4
Can update react-native-navigation-redux-starter-kit?

[losheredos]

This installation issues of RNN makes is very annoying.. I doubt if its worth using this library to get performance improvements in navigating.. I'm trying to install/re-install RNN to newer RN versions such as 0.59.10 and 0.60.4, and not able to achieve anything..

[SudoPlz]

navigation in react-native is a P-A-I-N!!

[guyca]

@SudoPlz as someone who's working on a navigation library for RN comments like these don't make me happier. If you want I'd be happy to pick this conversation up on Discord 👍

[SudoPlz]

For sure man, it's just my frustration talking, you guys rock.

[t1amat9409]

@guyca I think It would be great to have a channel for RNN on Discord.

[juddey]

@t1amat9409 https://discordapp.com/invite/DhkZjq2
If that not working then theres a link on the front page called "Chat with us"

[guyca]

Hey guys, published alpha.10 - it includes fixes to cut icons on iOS and to SideMenu visibility issues. If all goes well and no new issues are found I'll publish it to latest in a few days.

cc @loga4

[aniciom]

@guyca https://github.com/wix/react-native-navigation/issues/5228#issuecomment-516506357 still happening

[andrew-a-hall]

I'm unclear from reading through this forum if this alpha release is meant to autolink as a 'react-native config' seems to show null for the Android platform which would infer that it does not. Is this the case and if manual linking is still required for this version, are the instructions different to 59?

Thanks,

[guyca]

Published alpha.11 with a fix to double mounting issue of setStackRoot top child.

@andrew-a-hall RNN still doesn't support auto linking, manual instructions are the same as v2.

[kabus202]

@guyca is FAB supported in v3?

[Zontex]

I upgrade my react-native-navigation to the alpha version, iOS have no issues whats so ever with react-native 60.4 but Android doesn't compile, I get the following errors:
> Task :react-native-navigation:compileReactNative57_5DebugJavaWithJavac FAILED 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
Would love to get some help on this

[sijad]

@Zontex you need to change missingDimensionStrategy to "RNN.reactNativeVersion", "reactNative60" in your app/build.gradle. if you faced any other issues you can also use RNN discord (https://discord.gg/DhkZjq2)

[raemarcsg30]

I just experienced bug on my app. If I open my 1st Modal Screen with statusbar: { visible: 'false' }, then I open the 2nd Modal Screen with statusbar: { visible: 'true' } the statusbar still disabled or not visible. Then I Reload the app, the all screen's statusbar in my app now in visible:'false' even only 1 Modal Screen with an option of statusbar: { visible: 'false' }.

I'm using "react-native-navigation": "^3.0.0-alpha.11". Please fix the bug.

Great work for the people who work on RNN! Thank you guys.

[mysterioushunt]

[iOS install] Are you still meant to manually import the Xcode project and link the binary with this version? or is there a different install process for v3?

[sijad]

@mysterioushunt v3 install process is same as v2, there are PRs (#5318, #5345) to add supporting auto-linking.

you can also create a new RN project with preinstalled RNN using react-native init MyApp --template rnn-typescript

[raemarcsg30]

I'm not using Mac, only Windows. I use the documentation of RNN v2 and @cesarm16 guide (In MainApplication) too to install the RNN v3.

[mysterioushunt]

@sijad Thanks for that, didn't know this existed, tried rnn template which didn't work but the rnn-typescript did. To fix my manual install I worked out that if I added the pod 'ReactNativeNavigation', :path => '../node_modules/react-native-navigation' pod to my pod file instead of importing the project and linking the binary it worked :)

[pribeh]

@guyca would be nice have topTabs working in this v3.
I'm using a cross solution provided by Native Base, but has a poor perfomance.

By the way, great work you doing here!

Have you tried react native tab view for this?

[cmejet]

@sijad we already have reactNative60 for missing dimensions but still have that error.
Execution failed for task ':react-native-navigation:compileReactNative51DebugJavaWithJavac'

reactNative60

[aniciom]

@cmejet Try this https://github.com/wix/react-native-navigation/issues/5228#issuecomment-516506357 i was having the same issue and i could came up with that fix and it worked (i know its not the optimal solution), it was reported but seems there's no fix for the moment.

[guyca]

@raemarcsg30 Thanks for reporting, will be fixed soon.

[raemarcsg30]

Happy to help.

[raemarcsg30]

In building the app for android (react-native run-android) then I got errors about the RNN, says Execution failed for task ':app:compileDebugJavaWithJavac'.
error: package com.reactnativenavigation does not exist import com.reactnativenavigation.NavigationApplication; like that. But yesterday my app is just working fine, I didn't do anything.

[buraky84]

i have the same problem. yesterday it was working fine. after deleting node_modules and re-installing i started to have the same error.

after spending so many hours i realized react-native-navigation library is missing reactNative60 folder under lib/android/app/src

so i
deleted node_modules folder
run npm cache clean --force
run npm i
and all went fine.

reactNative60 folder was in place.

RN version 0.60.4
RNN version 3.0 alpha 11

[isuhar]

@guyca is FAB supported in v3?

+1 FAB renders on the top of screen under topBar

[EhtishamAli786]

HI @guyca , I am also using "react-native-navigation": "^3.0.0-alpha.11" version, when I open drawer (sideMenu) with swipe gesture, my statusbar turns black, i don't know why this is happening! before swipe it have a custom color but after that statusbar is black. Please help.

[sijad]

@EhtishamAli786 this is because you can apply custome options for your drawer, please add statusbar color in your sidemenu options too. it's working fine for me

[EhtishamAli786]

Hi @sijad, thanks for reply, can you share a working snippet with me. it will be a great help

[sijad]

this is my sidemenu static options:

Drawer.options = () => ({
  statusBar: {
    drawBehind: true,
    backgroundColor: 'rgba(0,0,0,0.3)',
  },
});

and this is my map screen options:

Offers.options = (): Options => ({
  statusBar: {
    style: 'light',
    drawBehind: true,
    backgroundColor: 'rgba(0,0,0,0.3)',
  },
  topBar: {
    visible: false,
  },
});

I also have this in my default options:

    // ...
    statusBar: {
      style: 'dark',
      backgroundColor: '#fff',
    },
    // ...

note my RNN version is 3.0.0-alpha.6, I can remember there where an issue with statusbar style (dark and light) in newer alpha version but if you faced any issue please upgrade to latest v3 version (which is 3.1) and try again.

demo:

[EhtishamAli786]

Finally its working, thanks, Really appreciate your help.

[SudoPlz]

Did anyone experience this crash?

2019-09-27 23:28:30.634 13508-13508/com.exampleapp.app.android E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.exampleapp.app.android, PID: 13508
    java.lang.RuntimeException: Unable to create application com.exampleapp.app.android.MainApplication: java.lang.RuntimeException: SoLoader.init() not yet called
        at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6465)
        at android.app.ActivityThread.access$1300(ActivityThread.java:219)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1859)
        at android.os.Handler.dispatchMessage(Handler.java:107)
        at android.os.Looper.loop(Looper.java:214)
        at android.app.ActivityThread.main(ActivityThread.java:7356)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)
     Caused by: java.lang.RuntimeException: SoLoader.init() not yet called
        at com.facebook.soloader.SoLoader.assertInitialized(SoLoader.java:781)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:505)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:484)
        at com.facebook.react.ReactInstanceManagerBuilder.getDefaultJSExecutorFactory(ReactInstanceManagerBuilder.java:290)
        at com.facebook.react.ReactInstanceManagerBuilder.build(ReactInstanceManagerBuilder.java:265)
        at com.reactnativenavigation.react.NavigationReactNativeHost.createReactInstanceManager(NavigationReactNativeHost.java:99)
        at com.facebook.react.ReactNativeHost.getReactInstanceManager(ReactNativeHost.java:38)
        at com.exampleapp.app.android.MainApplication.createReactGateway(MainApplication.java:117)
        at com.reactnativenavigation.NavigationApplication.onCreate(NavigationApplication.java:28)
        at com.exampleapp.app.android.MainApplication.onCreate(MainApplication.java:208)
        at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1189)
        at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6460)

?

Here's my onCreate:

public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false); // <-- Check this line exists within the block
...

[AbednegoTM]

It works on android but gives me this error on ios : Remote branch 3.0.0-alpha.11 not found in upstream origin.

[kgaspar]

It works on android but gives me this error on ios : Remote branch 3.0.0-alpha.11 not found in upstream origin.

Worked for me by installing the current master branch version instead of the "3.0.0-alpha.11" :
yarn add [email protected]
And then run pod install inside the ios folder

[AbednegoTM]

It works on android but gives me this error on ios : Remote branch 3.0.0-alpha.11 not found in upstream origin.

Worked for me by installing the current master branch version instead of the "3.0.0-alpha.11" :
yarn add [email protected]
And then run pod install inside the ios folder

Thank you @kgaspar i will try that

[InuriIlangakoon]

@guyca Is there any updates on TopTabs?

I'm using

• react native - 0.60.5
• react-native-navigation - 3.0.0-alpha.11

Currently i'm having bottom tabs for the IOS version and trying to add top tabs for Android version.

I added the top tabs but the top tab bar is not displayed. But can navigate to the screens by swiping the screen to left and right.

[bmwertman]

I am in the process of updating to RN 0.61.4 from a pre 0.60.0 version where linking changed. I am getting the error;

Unable to define method 'getConstants()' on NativeModule 'RNNBridgeModule'. NativeModule 'RNNBridgeModule' already has a constant or method called 'getConstants'. Please remove it.

as is seen in issue #4861

I deleted my package-lock.json updated package.json to
"react-native-navigation": "^3.5.1"
ran npm install
ran pod install from ./ios
and still get the same issue.

[GioLogist]

Unable to define method 'getConstants()' on NativeModule 'RNNBridgeModule'. NativeModule 'RNNBridgeModule' already has a constant or method called 'getConstants'. Please remove it.

I, too am seeing this after upgrading. Have cleaned node_modules and pods as well.

[smooJitter]

@GioLogist did you find a solution?

[GioLogist]

@smooJitter Apologies for not following up. I did, indeed find a solution. If i'm not mistaken, the error came from the steps i took to upgrade from v2 to v3 of RNN. Unfortunately, I have one giant commit for the most part where I did the upgrade, so i can't retrace my steps for that exact issue.

Here's what I remember doing though.

• Cleaned node_modules & pods
• Cleaned derived data in X-Code
• Verified I followed the installation instructions (I think i may have had leftover / legacy stuff)
• Manually went through the AppDelegate files.

If i'm not mistaken, there was some crossover / junk left behind from a combination of an older version installed, attempt to upgrade and RN0.60.0 now having auto-link.

I wish I had a more direct answer for you. Happy to help brainstorm further if you want to reach out. Aside from that, definitely be sure to leave the solution behind once you find it! Seems like this is pretty common and I failed in dropping the solution myself 😞