React-native-router-flux: Hide TabBar

Created on 10 Dec 2015 · 31Comments · Source: aksonov/react-native-router-flux

Say I have a Route that is a part of a TabBar. Is it possible to remove/hide the tabbar (i.e fullscreen) when I go to that particular route?

app__-_google_drive

The tabbar can be seen in the bottom. I want to remove it when I go to the route that is triggered when I press the button in the middle.

Source

sslash

Most helpful comment

This is not working for me in v4.0.1. The hideNavBar prop works on any nested Scene, but not hideTabBar.

        <Stack
          key="home"
          title={AppConfig.appName.toUpperCase()}
          icon={() => <Icon name="planet" {...DefaultProps.icons} />}
          {...DefaultProps.navbarProps}
        >
          <Scene key="home" component={AboutComponent} />
          <Scene
            hideTabBar
            hideNavBar
            key="designer"
            title="DESIGNER"
            component={DesignerContainer}
            Layout={DesignerComponent}
          />
        </Stack>

j-funk on 19 Jan 2019

👍12 ❤1

All 31 comments

:+1:

erdostom on 11 Dec 2015

try latest 1.0.3 and hideTabBar for Route component (Wanted: person who will write docs :)

aksonov on 11 Dec 2015

nice! but if you go back, it is now gone forever :( I can try and write some docs!

sslash on 11 Dec 2015

oops, will check.

aksonov on 11 Dec 2015

@sslash Should work now with latest release, it was bigger problem - tab bar was not updated if you switched externally, not via tabbar but from button or somewhere else.

aksonov on 11 Dec 2015

nice. Though it seems like the selected property on the initial route is now broken

sslash on 12 Dec 2015

@aksonov: I'm updated to the latest version and I've added hideTabBar={true} to my route inside the tabbar and it does not work. I can pull the route out of the tabbar component but then I lose navigation. Thoughts?

joshuarotenberg on 13 Dec 2015

I can't reproduce. Make sure you are using latest version, i've updated package.json for demo now

aksonov on 13 Dec 2015

Hiding tab bar is not working for nested routes (i.e. start route doesn't have hideTabBar, but next one (pushed) have this, tab bar will not be hidden)

aksonov on 15 Dec 2015

should work with 2.0.5, please check demo, tab n2

aksonov on 12 Jan 2016

@aksonov 'Hiding tab bar is not working for nested routes (i.e. start route doesn't have hideTabBar, but next one (pushed) have this, tab bar will not be hidden)' Is this fixed?
I am now try version 2.1.4 and just add hideTabBar={true} like below. But it seems not working.

paulbao on 3 Feb 2016

Check Example, second tab is hidden.

3 февр. 2016 г., в 0:48, paulbao [email protected] написал(а):

@aksonov https://github.com/aksonov 'Hiding tab bar is not working for nested routes (i.e. start route doesn't have hideTabBar, but next one (pushed) have this, tab bar will not be hidden)' Is this fixed?
I am now try version 2.1.4 and just add hideTabBar={true} like below. But it seems not working.
—
Reply to this email directly or view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/52#issuecomment-178892509.

aksonov on 3 Feb 2016

Yes, I've checked Example and only Navigation bar is hidden for the second tab not Tab bar.

paulbao on 3 Feb 2016

Looks like other changes broke it. It definitely worked with 2.0.5..

aksonov on 5 Feb 2016

Should work now, with latest 2.2.2 for Tab 3, Example was updated accordingly.

aksonov on 11 Feb 2016

Thanks @aksonov , the example works well, but if I add hideTab={true}
<Route name="tab2_2" component={TabView} title="Tab #2_2 hideTabBar={true}" />. It still doesn't work.

paulbao on 11 Feb 2016

Your title doesn't have quote closed...

aksonov on 19 Feb 2016

Have you tried <Route name="tab2_2" component={TabView} title="Tab #2_2" hideTabBar={true} /> ?
To be honest, It's just a typo that I am trying to explain this issue by your provided example. hideTabBar is still not working for both my own project and your Example.

paulbao on 19 Feb 2016

I will do when will have time, so it doesn't work only for tab#2? looks very strange.

aksonov on 19 Feb 2016

Thanks for your time. I think it's not working for nested Route. In another word, it works for tab1 and tab2, but not work for tab1_2 and tab2_2

paulbao on 19 Feb 2016

I confirmed that even the latest master release (2.2.6) doesn't fix this.
@aksonov Btw, a big thank for your initiative, :+1: for the way you designed the route and router management.

KBLNY on 19 Feb 2016

Need this too: hide tab bar for nested route.

kesha-antonov on 1 Mar 2016

3.0 is released, please check it there. Closing it for now, because it is for outdated version (2.x)

aksonov on 16 Mar 2016

Did this ever get resolved? I can't use 3.x cos of other modules needing a lower version of React-native.

jamesone on 1 Apr 2016

👍1

I'm wondering the same as @jamesone, anyone ever figure out a workaround?

brien-crean on 16 Apr 2016

@brien-crean - Haven't found one yet. Would be extremely useful though.

jamesone on 16 Apr 2016

👍1

In ^4.0.0-beta.26, you can just put hideTabBar={true} on any scene and it will hide the tab bar for that scene or for the whole navigation inside of that scene

micahkatz on 22 Jun 2018

This is not working for me in v4.0.1. The hideNavBar prop works on any nested Scene, but not hideTabBar.

        <Stack
          key="home"
          title={AppConfig.appName.toUpperCase()}
          icon={() => <Icon name="planet" {...DefaultProps.icons} />}
          {...DefaultProps.navbarProps}
        >
          <Scene key="home" component={AboutComponent} />
          <Scene
            hideTabBar
            hideNavBar
            key="designer"
            title="DESIGNER"
            component={DesignerContainer}
            Layout={DesignerComponent}
          />
        </Stack>

j-funk on 19 Jan 2019

👍12 ❤1

FYI - in "react-native-router-flux": "4.0.6" I had to add 'hideTabBar={true}' to the , not for it to work.

@j-funk not sure if the same is the case in 4.0.1