How to change the tabs in react native application using native base components

Question

i have a main screen that contains 2 Tabs in which every one renders different result. At the end of the the first tabs, i have two buttons that : First Button --> redirect to First Tab year 1 (the default tab) Second Button --> redirect to First Tab Version Two year 2 So, basically the buttons redirect to different Tab every time selected . I need to only change the tab not the whole screen. here is the code that i used and it's working fine for the default Tab but i don't know how to implement the buttons so that it redirects to different tabs with changing the main screen ... Any help ?

Main screen :

<Tabs>
    <Tab heading="First Tab">
        <FirstTab text={key} />
    </Tab>
    <Tab heading="Second Tab">
        <SecondTab/>
    </Tab>
</Tabs>

the First Tab (the default one)

<ScrollView>
                ...
                    <View style={{flexDirection: 'row'}}>
                        <Button active>
                            <Text>
                                year 1 
                            </Text>
                        </Button>
                        <Button>
                            <Text> year 2  </Text>
                        </Button>
                    </View>
                </View>
</ScrollView>

Here is an image that explains what i need to do :

I also tried this method: Implementing Footer Tabs in Native React using Native Base and the code i used is :

<Tabs>
    <Tab>
        <Content>{this.renderSelectedTab()} </Content>
    </Tab>
    <Tab>
        <SecondTab/>
    </Tab>
</Tabs>
<View style={{flexDirection: 'row'}}>
    <Button active={this.selectedTab==='2016'}
            onPress={() => this.state.setState({selectedTab: '2016'})}>
                  <Text> 2016 </Text>
    </Button>

    <Button active={this.state.selectedTab==='2015'}
            onPress={() => this.setState({selectedTab: '2015'})} >
                <Text> 2015 </Text>
    </Button>
</View>

..

renderSelectedTab () {
   console.log("this.state.selectedTab", this.selectedTab )
        switch (this.state.selectedTab) {
            case '2016':
                return (<Tab2016 />);
                break;
            case '2015':
                return (<Tab2015 />);
                break;
            default:
                return (<Tab2016 />);
        }
    }

And i get

If i use this.selectedTab instead of this.state.selectedTab it runs fine but i get in the console : and it runs directly the default value and the buttons don't work

Answer 1

Actually, that is not how it works. You need to use the page and initialPage props of Tabs Component and then to change tabs you only need to update the page props to the tab index

So that is an example:

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

export default class AuthScreenContent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {activeTab: 0, initialTab: 0}
  }

  render() {
    return (
        <Container>
          <Tabs initialPage={this.state.initialTab} page={this.state.activeTab}>
            <Tab heading="Sign up">
              <Text>This is the register's content </Text>
              <Button
                  title="Go to login tab"
                  onPress={() => this.setState({activeTab: 1})}
              />
            </Tab>
            <Tab heading="Login">
              <Text>This is the login's content </Text>
              <Button
                  title="Go to register tab"
                  onPress={() => this.setState({activeTab: 0})}
              />
            </Tab>
          </Tabs>
        </Container>
    );
  }
};