React-native-navigation: [V2] Topbar issue hiding in topbar visible screen

[webdevsyd]

Issue Description

I have an initial screen set in root that doesn't need a topbar so I set this in my component screen

static get options() {
return {
topBar: {
visible: false,
drawBehind: true,
animate: false
}
}
}

In my 2nd screen which has topBar I have this

static get options() {
return {
topBar: {
visible: true,
drawBehind: false,
animate: false
}
}
}

The problem however is when I click the back button, the topBar is flickering when hiding in the 2nd screen. Is there a way that the topBar will hide but will not flicker.

Environment

• React Native Navigation version: ^2.0.2568
• React Native version: ^0.56.0
• Platform(s) (iOS, Android, or both?): IOS
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone 6, IOS 12

[steve228uk]

I'm also experiencing this issue. I've tried merging options on componentDidAppear too but had no luck. Here's a recording of the issue I'm having with slow animations turned on: https://drive.google.com/file/d/1ciKy8Ycnp6BqlZuJ1rQAUHOcwwjvce6Q/view?usp=sharing

There's also an issue on Android where if the topBar is set to visible: false the space for the bar remains.

[guyca]

@yogevbd Isn't this what you're currently working on?

@steve228uk You'll need to set drawBehind: true when hiding topBar on Android.

[yogevbd]

Yes I'm on it

[steve228uk]

Thanks @guyca!

[thalesgaldino]

For those using modals, you also need to take in consideration if you show modal with a stack, e.g.:

Navigation.showModal({
      stack: {
        children: [
          {
            component: {
              name: target,
            },
          },
        ],
      },
    });

that would add a topBar, whilst if you just add a component, e.g:

Navigation.showModal({
      component: {
        name: target,
      },
    });

Then the topBar will be hidden, and no gap, and, therefore, you will not need to set topBar visibility whatsoever. Tested on version 2.0.2621