Nativebase: How can we hide tabs header?

[Symous]

Hi, is there any way we can hide the header of the tabs?
for example,I would like to show the header if there are more than 1 tab item so that the user can choose the tab, but it will be better to hide the header if there is only one tab item(not waste the space of the screen).Thanks!

[akhil-geekyants]

@Symous If you want to hide the < Header /> component, you can simply add a jsx condition to check the number of tabs and display the header accordingly.

{
   this.state.numberOfTabs > 0 ? <Header hasTabs /> : null
}

[Symous]

@akhil-geekyants , hi , thanks for your reply, I might have not describe the question clearly , what I want to do is hide the "tabBar" of the Tabs instead of hiding the < Header />'component.

[Symous]

and hasTabs prop is used to remove the shadow of the header on Android and the border bottom line on iOS.

[akhil-geekyants]

@Symous if you want to hide the TabBar, you can write something similar to this

 <Container>
        {this.state.numberOfTabs > 0 ? (
          <Tabs>
            <Tab heading="Tab1">
              <TabOne />
            </Tab>
            <Tab heading="Tab2">
              <TabTwo />
            </Tab>
            <Tab heading="Tab3">
              <TabThree />
            </Tab>
          </Tabs>
        ) : (
          <Content>
            <TabOne />
          </Content>
        )}
      </Container>

hasTabs - It is advisable to use hasTabs prop with Header while using Tabs. You can refer the docs here

[Symous]

@akhil-geekyants thanks again. :D , it will be much better if there is a prop to control the visibility of the tab.

[chriscoderdr]

Wouldn't that create two instances of the Tabone?

[chriscoderdr]

Actually I just found a better way, you can do it in the renderTabBar prop that is in tab.
something like this
renderTabBar={(() => {
if (this.state.hideTabBar) {
return () => ;
}
return undefined;
})()}
>

[harshaliitr]

Can we add animation to hide/show the tab bar? for example if the user is scrolling down in a scrollview, hide the tab bar and show it if he scrolls up.

[Manikanta-GEP]

Looking for the same.