Search code examples
iosreact-nativenavigationvelo

navigation wix v2-v3 not hiding bottom tab properly

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

This is how I use the Navigation.mergeOptions:

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

This is how it looks at the bottom: enter image description here

EXTRA INFO: I just tested without opening the modal, trying to hide it on the same screen, and it happens the same, so this isn't a problem of my modal. Thought that this would be also related to ScrollView/FlatList but it wasn't, tested it on a simple View with Flex and it happens as well. It should be easy to replicate.

Any idea about this issue? Thanks!

Some environment information:

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

  • This is a bug in RNN. Hiding BottomTabs with animation isn't supported on iOS and was added as a PR to RNN. That PR probably didn't take this use case into account.

    Your best option for now is to draw the screen behind the BottomTabs by setting drawBehind: true in static options, and to handle the bottom padding your self.