React-native-navigation: V3: BottomTab's visibility doesn't work

[opiruyan]

Issue Description

hiding bottom tab doesn't work.
on iOS it just remains on the bottom on the screen.
on Android results in a black space on the bottom of the screen

Steps to Reproduce / Code Snippets / Screenshots

Navigation.setDefaultOptions({
            bottomTabs: {
                visible: false,
            }
        });

---

Environment

• React Native Navigation version: 3.2.0, 3.1.1, 3.1.2
• React Native version: 0.61.2
• Platform(s) (iOS, Android, or both?): iOS and Android
• Device info (Simulator/Device? OS version? Debug/Release?): simulator and device. iOS 12.4.2. Android 9

[khorark]

Issue Description

hiding bottom tab doesn't work.
on iOS it just remains on the bottom on the screen.
on Android results in a black space on the bottom of the screen

Steps to Reproduce / Code Snippets / Screenshots

Navigation.setDefaultOptions({
            bottomTabs: {
                visible: false,
            }
        });

Environment

• React Native Navigation version: 3.2.0, 3.1.1, 3.1.2
• React Native version: 0.61.2
• Platform(s) (iOS, Android, or both?): iOS and Android
• Device info (Simulator/Device? OS version? Debug/Release?): simulator and device. iOS 12.4.2. Android 9

bottomTabs: { visible: false, animate: false, drawBehind: true, },

You used this options?

[opiruyan]

@khorark
Of course.

Apparently, on iOS part

- (void)rnn_setTabBarVisible:(BOOL)visible animated:(BOOL)animated

is called with

visible = YES

though it is false on a js-side.

So setting

visible = NO

inside ite method hides tabs, but leaves the space, which is somewhat similar to Android.

[khorark]

@opiruyan I'm also hidden bottom tabs and this work for android and ios. Version RNN 3.2.0

[opiruyan]

@khorark well, the story that It used to work on v2.
And the issue appeared just after upgrading RN version to and RNN. No changes to the code were made whatsoever.

[davidmarinangeli]

Unfortunately, I am facing the same problem: in my defaultOptions I have added this

bottomTabs: { visible: false, animate: false, drawBehind: true, },

without luck. The result is this. ( the bottom tab bar upon the white bar is my custom one ).

[edferreira]

Same is happening here. It worked fine on V2

[edferreira]

When I set bottomTabs: { visible: false, animate: false, drawBehind: true, } at defaultOptions it's not working, but doing with the Navigation.push works as expected.
Thanks @khorark

[davidmarinangeli]

When I set bottomTabs: { visible: false, animate: false, drawBehind: true, } at defaultOptions it's not working, but doing with the Navigation.push works as expected.
Thanks @khorark

I can confirm that using push gives me the correct behavior. Unfortunately, I need defaultOptions to work too.

[ArjunRajesh]

For customizing android bottom bar, as i have curved borders in the design, I am trying to hide bottomTabs and create a custom one.
But as i am making visible:false,drawBehind:true; finding a white space in android, is there any hack for removing white space or alternatives on how i can customize bottom Tabs.

[diegoprates]

@ArjunRajesh I had the same problem, solved it by creating a custom one with Navigation.showOverlay and then you can set the height based on const { bottomTabsHeight } = await Navigation.constants()

[davidmarinangeli]

Any update on this? @diegoprates your workaround does not work on my app, unfortunately

[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.

[samparmenter]

This is still an issue!

[guyca]

Hey guys, this is fixed in v5. Sorry for the inconvenience.