React-native-navigation: mergeOptions to hide bottom tabs leaves a white space, doesn't hide bottom tab container

[msqar]

Issue Description

I'm trying to dynamically hide the bottom tabs whenever a filter modal shows up from bottom to top.
But for some reason, the bottom tab container (white) doesn't slide down.

I found that it will only start working whenever I change to a different screen (by push method) that also hides the bottom tabs correctly, go back to the main view, open filters, and all of a sudden starts working there.

This is how I use the Navigation.mergeOptions:

Steps to Reproduce / Code Snippets / Screenshots

    toggleFilter() {
        var shouldOpen = !this.state.filterOpened;

        Navigation.mergeOptions(this.props.componentId, {
            bottomTabs: {
                visible: shouldOpen ? false : true,
                drawBehind: shouldOpen ? true : false,
                animate: shouldOpen ? true : false
            }
        });

        this.setState({
            filterOpened: shouldOpen
        });
    }

Here's a screenshot. In the screenshot, you can see the bottomTabs that are gone, they have slidden down. I tried using the Inspector, but it's not possible to select it, it's like a "void" place.
https://ibb.co/W5BRvDJ

---

Environment

• React Native Navigation version: ^3.0.0-alpha.0
• React Native version: ^0.60.0
• Platform(s) (iOS, Android, or both?): iOS (Haven't tested on Android yet)
• Device info (Simulator/Device? OS version? Debug/Release?): Real iPhone XS latest iOS 12.2

[msqar]

Okay so it seems that is happening outside the modal so it's not a modal bug. I also tested if it was due to FlatList/ScrollView, but it wasn't either, it also happens on normal Views.
Unless i'm using the mergeOptions wrong. This bug is killing me lol.

How to replicate it?

Just mergeOptions to hide current screen's bottom tabs and see if everything is hidden.

[msqar]

Ohhhhh i just saw this on the docs:

"On iOS, BottomTab visibility can be changed only when pushing screens. This means that if you'd like to hide BottomTabs when pushing a screen, You'll need to set the property to false in the options passed to the push command or via the static options(passProps) {} api."

It's not possible, even on latest version? I'm opening this modal and it looks very ugly with the tabs at the bottom.

[guyca]

Hey @msqar, I've replied in your SO question 👍

[tarun-khanna]

Hey @msqar !
I am facing the similar issue, is there any workaround for this ?

[benpeke]

Reading the docs it says that dynamically hiding the tabs can only be done on android. Is this a bug which will be fixed so it can also be used in iOS?

https://wix.github.io/react-native-navigation/#/docs/layout-types?id=changing-bottomtabs-visibility

[msqar]

@benpeke yea, still no fix for this.

[benpeke]

MergeOptions does not change the visibility of the tabBar, however Navigation.push will allow the visibility to be turned off. So I was trying to work around this problem by pushing the same component ID with visibility set to false.

Its looks like this could work, but pushing a component onto the stack mounts a new react component, so I will need to deal with having duplicate components running at the same time.