Hide TabBar

[microwavesafe]

With DrawerNavigation we get two nice routes

this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer

In my app I would like to hide the TabBar while the keyboard is shown and the above functionality would be very useful. Is it something you would consider a pull request for, or is there a better way of doing it that I haven't spotted?

[ericvicenti]

We currently have a header.visible navigation option for the StackNavigator.

I think it would make sense to add a tabBar.visible option for the TabNavigator. A PR would be accepted for that.

@satya164

[satya164]

@ericvicenti am I right when I say that tabBar.visible won't be animated?

[microwavesafe]

In my particular case I don't need the tabBar to animate.

[ericvicenti]

Yeah I think we can skip the animation for it. Maybe somebody will want it one day, but I think we can help @microwavesafe's use case pretty easily

[satya164]

Adding good first task label then. Should be easy to implement.

[microwavesafe]

@satya164 @ericvicenti

I've got this roughly working, I've implemented the visible check in the render function of TabView.js.

  render() {
    const {
      navigation,
      tabBarComponent,
      tabBarPosition,
      animationEnabled,
      lazyLoad,
    } = this.props;

    let renderHeader;
    let renderFooter;

    const { state } = this.props.navigation;
    const tabBar = this.props.router.getScreenConfig(this.props.childNavigationProps[state.routes[state.index].routeName], 'tabBar');

    if ((typeof tabBarComponent !== 'undefined') && (tabBar.visible !== false)) {
      if (tabBarPosition === 'bottom') {
        renderFooter = this._renderTabBar;
      } else {
        renderHeader = this._renderTabBar;
      }
    }

    let configureTransition;

    if (animationEnabled === false) {
      configureTransition = this._configureTransition;
    }

    return (
      <TabViewAnimated
        style={styles.container}
        navigationState={navigation.state}
        lazy={lazyLoad}
        renderHeader={renderHeader}
        renderFooter={renderFooter}
        renderScene={this._renderScene}
        renderPager={this._renderPager}
        configureTransition={configureTransition}
        onRequestChangeTab={this._handlePageChanged}
      />
    );
  }
}

I'm not convinced that's the easiest way to get the tabBar through getScreenConfig, but I can't find an easier way.

Also at the moment, this is leaving the rest of the page still sitting above a now empty tab bar. So not sure this is really how I should be doing it.

[satya164]

Can you show a screenshot of page showing empty bar? Is this iOS or Android or both?

[microwavesafe]

Actually it looks like it's the page contents fault. If I use the above code to turn off the tabBar and this code in page render

<View style={{flex: 1}}>
    <View><Text>Top Text</Text></View>
    <View style={{position: 'absolute', left: 0, right: 0, bottom: 0}}><Text>Bottom Text</Text></View>
</View>

It works fine and the "Bottom Text" shifts to sit at the bottom of the screen when the tabBar is turned off.

Do you want me to create a pull request with the above changes?

[satya164]

Nice. Yeah, send a PR!

[microwavesafe]

Pull request submitted #152. Unfortunately I can't programmatically turn the tabBar on or off until SetParams works in TabNavigator. I have a pull request for implementing it #132 and it looks like #134 also addresses params issues with TabNavigator. Do you know if you'll be able to merge either of these?

[satya164]

Cool. Will check both tonight.

[natashache]

@microwavesafe I added your changes you committed for hiding tab bar and it works great! Thank you so much for adding this very useful option!

[microwavesafe]

#152 fixes this, but still need to merge #132 to be able to turn it on and off.

[ryannewton]

I would like to do the same thing. How do I hide the TabBar when the keyboard is active?

[PolGuixe]

@ryannewton have you found any way?

[ryannewton]

@PolGuixe We ended up putting the tab bar on the bottom for iOS and Android so the keyboard naturally covers up the tab bar.

For those looking to do this, add tabBarPosition: 'bottom' to the TabNavigator options.

[alinz]

if tabBarPosition sets to bottom for android, it doesn't cover by keyboard and it moves along with it. Has any one encounter this?

[philsam]

Yes. I encountered this issue as well

[PolGuixe]

I am experiencing the same as @alinz. @ryannewton is it different for you?

[alinz]

would be nice to get some insight from @satya164 and @ericvicenti if they know any possible solutions.

[ryannewton]

@PolGuixe It stays at the bottom for me. We're on 1.0.0-beta.11.

Did it ever get covered up for you?

[PolGuixe]

@ryannewton no. It has always been pushed by the keyboard.

[microwavesafe]

I believe this has to do with the introduction of this line

android:windowSoftInputMode="adjustResize"

in the AndroidManifest.xml file.

https://github.com/facebook/react-native/releases/tag/v0.42.3

If you have the line, the tabbar will avoid the keyboard by itself, if you don't have the line it will be covered. At least in my experience.

[alinz]

@microwavesafe thanks, that was it. it fixes my problem.

[AaronVasquez]

Any plans to support animation?

[rumbogs]

I’m also looking for a solution to animate the tab between screens that show or hide it. I get some ugly content jumping otherwise. Do you have plans on supporting it, or a workaround until then?

[tonmanayo]

Is there a way we can animate the tabBar when hiding yet? or hide the tabBar on a screens componentDidMount?