React-native-navigation: [v2] bottomTabs visible false is not working

[swingywc]

Steps to Reproduce / Code Snippets / Screenshots

I have set bottomTabs: { visible: false } before setRoot and registerScreens as following:

    Navigation.events().registerAppLaunchedListener(async () => {

      await Navigation.setDefaultOptions({
        popGesture: false,
        bottomTabs: {
          visible: false,
          drawBehind: false,
          translucent: false,
          hideShadow: true,
          backgroundColor: '#0f0'
        }
      });

      await registerScreens();

      Navigation.setRoot({
        bottomTabs: {
          children: [
            {
              component: {
                name: 'screens.Home',
                passProps: {
                  text: 'This is tab 1'
                }
              }
            },
            {
              component: {
                name: 'screens.Album',
                passProps: {
                  text: 'This is tab 2'
                }
              }
            }
          ]
        }
      });
    });

My HomeScreen component didn't put any extra config as following:

import React, { Component } from 'react';
import { View } from 'react-native';

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: '#f00'}}>
      </View>
    );
  }
}

The result is like below screenshots:

The tabBar didn't hide completely, with some space left at the bottom (green area).

NOTE: This should be a BUG, I have tried all solution provided inside RNN v2 guide.

Someone please help!

Environment

React Native Navigation version: 2.0.2286
React Native version: 0.52.0
Platform(s) (iOS, Android, or both?): IOS
Device info (Simulator/Device? OS version? Debug/Release?): iPhone X simulator, iPhone 6, in Debug mode

[yusufyildirim]

Nope it's not a bug you should set translucent true too @swingywc

[swingywc]

hi @yusufyildirim , thanks for your response. However, setting translucent to true didn't make any changes. The initial page still still show the green area but it will disappear when I go to another tab.

[swingywc]

@yusufyildirim @yershalom
What I want to achieve is the following:

1. Make the middle tab icons bigger. (like the design in this issue: https://github.com/wix/react-native-navigation/issues/2126)
2. Allow this middle tab button call a custom function to check user login status, if user is not login yet, will pop-up a login modal. Otherwise, navigate to the tab component.

My current solution is to hide the bottomTabs and show a customize bottomTabs component in every page.

Do you have any solution to achieve the above target? Appreciate for your kindly help.

[yusufyildirim]

@swingywc Yea I need something like that too but library is not flexible about the bottomTabs but as I understand, they have plans about that. Are you guys gonna create a flexible api like topBar @guyca?

[maestrolsj]

I want to hide the bottomTabs completely but impossible

[yogevbd]

Try this:

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

[terreb]

@yogevbd, Navigation.mergeOptions( 'bottomTabs', { bottomTabs: { visible: false, translucent: true, drawBehind: true } } ) doesn't work. "react-native-navigation": "^2.0.2493"

[terreb]

@yogevbd, doing so like you suggested in Navigation.setDefaultOptions doesn't work neither

[mtzfactory]

Yeah, I have the same problem...