-
Notifications
You must be signed in to change notification settings - Fork 201
Hiding tabBar on a per route basis #89
Comments
I think this is reasonable, it is very related to #46 which I don't have a good answer for yet |
+1 |
2 similar comments
+1 |
+1 |
A workaround for this is to push to a then u can push a route without tabbar:
|
@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. |
u just need one master tab, and it is useful to push modal as well |
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 =) |
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: |
@sibelius @brentvatne Maybe we can use redux to control tabbar and navbar visible state? and Views can simply dispatch show or hide actions. |
Tab bar visibility property actually required. Because pushing to the master stack navigation causes different appearance style. |
If you need a hack set the property 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. |
+1 |
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. |
I'll try to put together a gist or add a doc to react navigation explaining how to do it using react navigation |
@jmparsons Could you add a quick example of how to change that state from an inner screen? |
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 }); |
@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
|
@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 |
@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. |
@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. |
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})); |
Can I configure a route to hide the tabBar? I.e. something like this:
The text was updated successfully, but these errors were encountered: