Hiding tabBar on a per route basis

[msageryd]

Can I configure a route to hide the tabBar? I.e. something like this:

static route = {
   tabBar: {
     visible: false
   }
}

[brentvatne]

I think this is reasonable, it is very related to #46 which I don't have a good answer for yet

[Isarstyle]

+1

[Ocupe]

+1

[keeth]

+1

[sibelius]

A workaround for this is to push to a master router, follow this gist https://gist.github.com/knowbody/ce483742a1761658b767428a0ed35147#modals by @knowbody

then u can push a route without tabbar:

this.props.navigation.getNavigator('master').push(Router.getRoute('postDetail', {id}));

[msageryd]

@sibelius Thank you for the tip. I already have this setup for my login/signup screens. But I wouldn't want it for the tabs. The beauty of tabs is that each tab has a separate stack of routes.

If I'd use a master router for this I'd have to have one master for each tab. Soon I'd have built myself a proprietary routing system.

[sibelius]

u just need one master tab, and it is useful to push modal as well

[msageryd]

Aha.. I didn't think long enough before answering, sorry =)

When I push a route on master without tabs I can't use the stacks on the other tabs anyway, so it doesn't matter. I.e. I only need one master as you say.

Now I'm liking the idea =)

[joonhocho]

Problem with having a master stack approach is that if you push another view with a tab bar from a modal within the master stack, then it's not possible to show tabbar?

For example within a stack the following can happen:
view with tab bar -(push)-> modal without tab bar -(push)-> view with tab bar

[joonhocho]

@sibelius @brentvatne Maybe we can use redux to control tabbar and navbar visible state? and Views can simply dispatch show or hide actions.
Also if there is a onEnter and onLeave (onFocus onBlur) subscriptions for each route like react-router does, then one can dispatch those actions at the route transitions to hide or show tabbar/navigation bar on per route basis.

[apaul314]

Tab bar visibility property actually required. Because pushing to the master stack navigation causes different appearance style.

[jmparsons]

If you need a hack set the property tabBarHeight to 0.1 or smaller just not 0 or else the boolean check will fail and default out:

this.props.tabBarHeight || TabBarComponent.defaultHeight

I had a special case where I didn't want to mess with my nav stacks. Example with state check:

tabBarHeight={(this.state.showTabBar) ? 56 : 0.1}

It would be really nice if there was more aesthetic control over the tab bar such as animated, visibility, height etc.

[gwendall]

+1

[msageryd]

It seems like the successor to ex-navigation will have quite some flexibility. I haven't looked deeper yet, so I don't know if this exact issue is covered. Looks like a great project. Really exciting.

https://reactnavigation.org/

[knowbody]

I'll try to put together a gist or add a doc to react navigation explaining how to do it using react navigation

[feliperaul]

@jmparsons Could you add a quick example of how to change that state from an inner screen?

[jmparsons]

@feliperaul

If the inner screen is loaded in your current screen, then you can pass state props to it. Then just modify the state props from the inner screen.

//CurrentScreen
state = {
  showTabBar: true;
}

<InnerScreen myProps={...this.state} />

//Innerscreen
this.props.myProps.setState({ prop: value });
//using custom boolean toggle hide
this.props.myProps.setState({ showTabBar: false });

[ajonno]

@jmparsons your suggested workaround is fine for us for the time being. can you provide a more thorough example of how to do this ? We don't know how to get a handle on the tab bar in our
view/component so we can then set it's height (to 0.1). Much appreciated.

this.props.tabBarHeight || TabBarComponent.defaultHeight

[jmparsons]

@ajonno Yeah here you go:

state = {
  showTabBar: true;
}

getTabBarHeight() {
  return (this.state.showTabBar) ? 45 : 0.1;
}

<TabNavigation
  tabBarHeight={this.getTabBarHeight()}
>
//tab items
</TabNavigation>

References:

https://github.com/expo/ex-navigation/#tabnavigation

TabNavigationLayout

[gabescarbrough]

@jmparsons Can you give some more context for where this code would go? Are you setting the showTabBar state in the screen components? I'm trying to hide the tab bar on the main screen of my app but I can't seem to figure out how to change the tabBarHeight prop on the TabNavigation component based on which screen is currently showing.

[jmparsons]

@gabescarbrough I would guess if your main screen is in a tab, but you want to hide the tabbar for that screen, then I would keep the state in the parent of the tab bar, and on jump to tab or tab press modify the state to update the ui. I haven't used this navigator in awhile.

[BhanuSagar1]

hello guyz..I am new to react native need some help. I am using expo/ex-navigation for a react native mobile application.In that i want to hide tabbar on a particular screen .For example when i navigate home to another screen In that another screen i dont want tabbar how can we do that...actually when i am navigating to another screen it was navigating in same tab so that tabbar is sticky in bottom..I dont want that tabbar on navigation..Help me friends

I tried this this.props.navigation.getNavigator('master').push(Router.getRoute('postDetail', {id}));
OutPut: Navigator Does Not Exist
what is getNavigator('master') ???