Nativebase: How to set active tab dynamically

[deepupathak]

Hi,
I am unable to set active tab dynamically. Please provide solution for this problem. I am sharing required information below.

react-native, react and native-base version

1. react-native -v: 0.47.1
2. node -v: 6.2.1
3. npm -v: 4.2.0
4. target platform: Android
5. operating system: windows 10 64 bit

Expected behaviour

N/A

Actual behaviour

N/A

Steps to reproduce (code snippet or screenshot)

N/A

Screenshot of emulator/device

N/A

Is the bug present in both ios and android or in any one of them?

Not a bug

Any other additional info which would help us debug the issue quicker.

N/A

[SupriyaKalghatgi]

@deepupathak Check the docs for Tabs
initialPage should do the work
Pass the page number to this

[deepupathak]

Hi @SupriyaKalghatgi thanks for quick response.

I have tried this but doesn't work for me. I am sharing code snippet below -

activateTab() {
if (this.state.Option == 0) {
    this.setState({ activeTabValue: 0 });
} else
   this.setState({  activeTabValue: 1 });
}

and I am callingactivateTab() method on button click and pass this.state.activeTabValue inside initialPage.

[SupriyaKalghatgi]

@deepupathak Did you try passing static values to initialPage?
Did that work?

[deepupathak]

@SupriyaKalghatgi Its working but I want to open the tab on button click with dynamic tab number (activeTabValue) which I mentioned above.

[deepupathak]

@SupriyaKalghatgi waiting for your response.

For your convenience, I am providing code sample more specifically.

<Button onPress={() => this.activateTab()}>
    <Text>SET</Text>
</Button>

activateTab() {
if (this.state.Option == 0) {
    this.setState({ activeTabValue: 0 });
} else
   this.setState({  activeTabValue: 1 });
}

 <Tabs initialPage={this.state.activeTabValue}>
    <Tab heading={<TabHeading><Text>Tab 1</Text></TabHeading>}>
        <Text>First tab</Text>
    </Tab>
    <Tab heading={<TabHeading><Text>Tab 2</Text></TabHeading>}>
       <Text>Second tab</Text>
     </Tab>
</Tabs>

[SupriyaKalghatgi]

1010

[akhil-geekyants]

@deepupathak you can use page prop of <Tabs/> component. Pasting a sample code

Code

import React, { Component } from 'react';
import { Container, Header, Content, Tab, Tabs, TabHeading, Text, Button } from 'native-base';
export default class TabsExample extends Component {

  constructor(props) {
    super(props)
    this.state = { initialPage: 1, activeTab: 1 }
  }

  render() {
    return (
      <Container>
        <Header hasTabs />
        <Tabs initialPage={this.state.initialPage} page={this.state.activeTab}>
          <Tab heading={<TabHeading><Text>Tab 1</Text></TabHeading>}>
            <Text>First tab</Text>
            <Button style={{ margin: 10 }} onPress={() => this.setState({ activeTab: 1 })}><Text>Go to second tab</Text></Button>
          </Tab>
          <Tab heading={<TabHeading><Text>Tab 2</Text></TabHeading>}>
            <Text >Second tab</Text>
            <Button style={{ margin: 10 }}><Text onPress={() => this.setState({ activeTab: 0 })}>Go to first tab</Text></Button>
          </Tab>
        </Tabs>
      </Container>
    );
  }
}

Gif

[streletss]

@akhil-geekyants, thanks! Is there a reason why this isn't mentioned in the docs?

[dchersey]

Thank you, this is helpful. How would I know which tab is active if the user click on it (instead of me doing so programmatically?

[anhhai680]

@akhil-geekyants thank you for your help.

[marcosbaroni]

@akhil-geekyants Thanks. It could be added to docs!

[Abhishekgarg727]

Thank you, this is helpful. How would I know which tab is active if the user click on it (instead of me doing so programmatically?

@dchersey did you find any solution yet ?

[dpwilhelmsen]

@Abhishekgarg727

I tried using the onChange attribute to track the selected tab. However, using this value to set the page was proving to be difficult. Instead, I found a goToPage method on the Tabs component. So I created a ref and called that method on button presses.

import React, { Component } from 'react';
import { Container, Header, Content, Tab, Tabs, TabHeading, Text, Button } from 'native-base';
export default class TabsExample extends Component {

  constructor(props) {
    super(props)
    this._tabs = null;
  }

  render() {
    return (
      <Container>
        <Header hasTabs />
        <Tabs ref={component => this._tabs = component}>
          <Tab heading={<TabHeading><Text>Tab 1</Text></TabHeading>}>
            <Text>First tab</Text>
            <Button style={{ margin: 10 }} onPress={() => this._tabs.goToPage(1);}><Text>Go to second tab</Text></Button>
          </Tab>
          <Tab heading={<TabHeading><Text>Tab 2</Text></TabHeading>}>
            <Text >Second tab</Text>
            <Button style={{ margin: 10 }}><Text onPress={() => this._tabs.goToPage(0);}>Go to first tab</Text></Button>
          </Tab>
        </Tabs>
      </Container>
    );
  }
}

Now, it doesn't matter if the user presses the button or the tab, the internal state of the tabs isn't mucked up. If you still need to track what the current active tab is, you can then use:

...
<Tabs ref={component => this._tabs = component} onChange={({i}) => this.setState({ currentPage: i })}>
...

[ramanasak]

How to know on which tab we are present? any method for that.

[ramanasak]

@deepupathak you can use page prop of <Tabs/> component. Pasting a sample code

Code

import React, { Component } from 'react';
import { Container, Header, Content, Tab, Tabs, TabHeading, Text, Button } from 'native-base';
export default class TabsExample extends Component {

  constructor(props) {
    super(props)
    this.state = { initialPage: 1, activeTab: 1 }
  }

  render() {
    return (
      <Container>
        <Header hasTabs />
        <Tabs initialPage={this.state.initialPage} page={this.state.activeTab}>
          <Tab heading={<TabHeading><Text>Tab 1</Text></TabHeading>}>
            <Text>First tab</Text>
            <Button style={{ margin: 10 }} onPress={() => this.setState({ activeTab: 1 })}><Text>Go to second tab</Text></Button>
          </Tab>
          <Tab heading={<TabHeading><Text>Tab 2</Text></TabHeading>}>
            <Text >Second tab</Text>
            <Button style={{ margin: 10 }}><Text onPress={() => this.setState({ activeTab: 0 })}>Go to first tab</Text></Button>
          </Tab>
        </Tabs>
      </Container>
    );
  }
}

Gif

how to do the same functionality by swiping left or right without onPress?

[mohity777]

@deepupathak you can use page prop of <Tabs/> component. Pasting a sample code
Code

import React, { Component } from 'react';
import { Container, Header, Content, Tab, Tabs, TabHeading, Text, Button } from 'native-base';
export default class TabsExample extends Component {

  constructor(props) {
    super(props)
    this.state = { initialPage: 1, activeTab: 1 }
  }

  render() {
    return (
      <Container>
        <Header hasTabs />
        <Tabs initialPage={this.state.initialPage} page={this.state.activeTab}>
          <Tab heading={<TabHeading><Text>Tab 1</Text></TabHeading>}>
            <Text>First tab</Text>
            <Button style={{ margin: 10 }} onPress={() => this.setState({ activeTab: 1 })}><Text>Go to second tab</Text></Button>
          </Tab>
          <Tab heading={<TabHeading><Text>Tab 2</Text></TabHeading>}>
            <Text >Second tab</Text>
            <Button style={{ margin: 10 }}><Text onPress={() => this.setState({ activeTab: 0 })}>Go to first tab</Text></Button>
          </Tab>
        </Tabs>
      </Container>
    );
  }
}

Gif

how to do the same functionality by swiping left or right without onPress?

g.i will give u the active index