Button onpress go to tab screen in react native base

Question

Here I used React native base scrollabletab. If i press the button('Go to menu4') then this screen will be move to Menu4. How to do that ?

Here is my code.

import React, { Component } from 'react';
import { Container, Button, Tab, Tabs, ScrollableTab,Text} from 'native-base';

import Screen from './screens/Screen';

export default class MyApp extends Component {
  render() {
    return (
      <Container>
        <Tabs locked={true} renderTabBar={()=> <ScrollableTab />}>
        <Tab heading="Menu1">
            <Screen />
          </Tab>
          <Tab heading="Menu2">
            <Screen />
          </Tab>
          <Tab heading="Menu3">
            <Screen />
          </Tab>
          <Tab heading="Menu4">
            <Screen />
          </Tab>
          </Tabs>
          <Button><Text>Go to Menu4</Text></Button>
      </Container>
    );
  }
}

Want to switch between pages in the app? If so, you need to select a router directory and use the onPress = {} event inside the button — Yoel, Sep 21 '19 at 20:53

score 1 · Accepted Answer · answered Sep 21 '19 at 21:06

1

NativeBase tabs has a method named goToPage.

Changing your code it would be:

<Tabs 
    locked={true} 
    renderTabBar={()=> <ScrollableTab />}
    ref={c=> this.tabs = c} 
>

      ...

      <Button onPress={()=> this.changePage(4)}><Text>Go to Menu4</Text></Button>

      ...

</Tabs>

And the changePage function would be:

changePage=(page)=> this.tabs.goToPage(page)

answered Sep 21 '19 at 21:06

Auticcat

4,359
2
13
28

If i declare the button outside the tabs component then Will it work ? – A.Developer Sep 22 '19 at 04:40
You can either pass it as a prop to childs or setup redux to have a state where you also keep track of which page number to show – Auticcat Sep 22 '19 at 06:01
Can u explain this ( ref={c=> this.tabs = c} & this.tabs.goToPage(page) ) – A.Developer Sep 22 '19 at 12:59
You can check the react docs here: https://en.reactjs.org/docs/refs-and-the-dom.html – Auticcat Sep 22 '19 at 13:27

Button onpress go to tab screen in react native base

1 Answers1