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

have you binded the renderSelectedTab function inside constructor? — Irfan Ali, May 08 '17 at 12:33
hi , i just solved my problem thank you .. but i'm stuck on how to change the style of a button when pressed .. and i will post the complete answer when finishing it — user3521011, May 08 '17 at 15:56
this will useful for you. http://stackoverflow.com/questions/34625829/change-button-style-on-press-in-react-native?answertab=votes#tab-top — Irfan Ali, May 09 '17 at 05:10
hey @SupriyaKalghatgi i solved it partially **but** still didn't figure out how to change the **style of the button when pressed** or not .. i couldn't find anything in the official documentation of native base or in any other source actually .. Do you have any idea how to do it ? thanks for your help — user3521011, May 25 '17 at 09:57
@user3521011 Try adding `onFocus` prop in the theme and style for the same — Supriya Kalghatgi, May 26 '17 at 06:04

score 3 · Answer 1 · answered Feb 14 '20 at 20:28

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>
    );
  }
};

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

1 Answers1