NativeBase Tabs component: documentation, methods, options, deep linking?

[dave-buzzy]

Hi all

NativeBase Tabs (http://nativebase.io/docs/v2.0.0/components#tabs) documentation is currently sparse - specifically: how do you programatically trigger tab navigation or deep link to a specific tab within a screen/scene/view? Additionally, can the tab component be used without a tab header (ie just using the swipe-able content tabs)?

example

As an example, I'd like to be able to use the Tabs component but need to deeplink into any tab (depending on where the user is coming to this screen from), and be able to control the tab content views from a FooterTab component (not rendering or hiding the 'normal' Tabheading component at the top). I can't just use a FooterTab jumping to separate screens for content because the tab content is all a subset of the current screen ('Title' and back button in the Header).

react-native, react and native-base version

"dependencies": {
    "native-base": "^2.0.6",
    "react": "15.4.2",
    "react-native": "0.39.2",
    "react-native-router-flux": "^3.37.0"
  },

ios / android?

Any.

[dave-buzzy]

Ok, programmatic linking may be covered here: #181? However, #181 predates NativeBase 2.0, and not working in my current implementation.

[sankhadeeproy007]

I believe you are looking for something like this.
As of v2.0.9, the above code works. You can set the initialPage and go to any page programmatically by goToPage(n). To hide the top TabBar, you'll have to set the tabUnderlineStyle opacity to 0. Also you'll need to eject the theme variables, and remove this line. Let me know if you have further questions.

[dave-buzzy]

Thanks! That looks exactly like what I was after.

[etamity]

@sankhadeeproy007 is that mean i have to modify NativeBase source code to remove the TabContainer height? is there anyway do it out side of the library source code?

[sankhadeeproy007]

No, you don't have to change the source. You just have to eject the theme and make the necessary changes.

[iiitmahesh]

@sankhadeeproy007 can you share gist native base footerTab with react-native-router-flux

[devanshsadhotra]

@sankhadeeproy007 i am not been able to change tab background color!! how can i do that , it is not chnaging from that default one

[ParthBarot-BoTreeConsulting]

@sankhadeeproy007 As per your comment https://github.com/GeekyAnts/NativeBase/issues/542#issuecomment-281676182, I want to remove the tab container completely and just use the screen swiping. Not sure what eject theme variables means, can you please elaborate more?

Is there any way we can reduce the height to 0 or etc? Please suggest

[sankhadeeproy007]

Ejecting is explained here

[ParthBarot-BoTreeConsulting]

Thanks @sankhadeeproy007, it helped!

but now I am facing another issue, I have the following code in one of the views under Tab

<StyleProvider  style={getTheme()}>
  <Container>
    <Tabs initialPage={1} tabUnderlineStyle={{opacity:0}}>
      <Tab heading="Config.">
       <ScrollView>
        <Table>
          <ScrollView horizontal={true}>
....

Now, the horizontal scrolling is not working for the internal <ScrollView>. If you have any suggestions, please let me know.

[phixtalk]

Hello guys, please can you help me with an issue, i have a component with a tab UI that calls another component with user name and picture, i want to be able to click on this inner container and have the tab in the outer container navigate to the next tab. Please is this possible

[PdxMehmet]

Hi there, I have a question. How is possible to navigate to another screen inside a Tab page, the second screen is not in the tabs ?

[vijaya06]

i have issue related to Tabs component of native base. Can u help me??

[jeanniton-mnr]

@sankhadeeproy007 i am not been able to change tab background color!! how can i do that , it is not chnaging from that default one

// JSX CODE
<Tabs
    tabBarUnderlineStyle={[styles.tabUnderline]}>
    <Tab heading="My title"
        tabStyle={[styles.tab]} activeTabStyle={[styles.activeTab]}
        textStyle={[styles.tabText]} activeTextStyle={[styles.activeTabText]}>
</Tab>

// JS Code (StyleSheet)
const styles = StyleSheet.create({

tabUnderline: {
        borderBottomColor: "white",
        borderBottomWidth: 5,
    },
tab: {
        backgroundColor: "#A50A93",
    },
activeTab: {
        backgroundColor: "#A50A93",
    },

});

Let me know if it help @sankhadeeproy007 ?

[mdmoin7]

          <ScrollView horizontal={true}>

Did you find a solution to this ??
I'm also facing similar issue, unable to scroll horizontally when adding a flatlist in tab