native-base tabs doesn't call lifecycle method componentWillUnmount

Question

I'm using native-base, redux and react-native, It seems that switching between tabs doesn't call the method componentWillUnmount, I want to do some actions when the tab is switched and the component is removed:

Main.js

export class Main extends Component {
  render() {
    return (
    <Container style={styles.containerStyle}>
        <Tabs initialPage={0}  >
        <Tab heading="Tab1">
            <Tab1 />
          </Tab>
          <Tab heading="Tab2">
            <Tab2 />
          </Tab>
        </Tabs>
      </Container>
    )
  }
}

Tab1.js

export class Tab1 extends Component {

  constructor(props) {
    super(props);
}

  componentWillMount(){   
    //called 
  }

  componentWillUnmount(){
    //not called when switching tabs
  }


  render() {
    return (
      <Container style={styles.containerStyle}>
        <Content>
          <Text>Tab1</Text>
        </Content>
    </Container>
    );
  }
}

How to call actions when the tab is switched and the component is removed?

Do you need to unmount the latest tab component? It will reduce the performance of you code and will cause rendering the tab in every call. — Vahid Boreiri, Sep 19 '17 at 06:08
what is the process here ? what are the life-cycle methods called when switching between tabs ? — Mahmoud Abd AL Kareem, Sep 19 '17 at 06:12

Vahid Boreiri · Accepted Answer · 2017-09-19T14:16:47.470

2

You can use the onChangeTab prop in the <Tabs> tag to listen the tab change event like the example below:

<Tabs 
  renderTabBar={()=> <ScrollableTab />} 
  onChangeTab={(obj) => {
    // obj = {
    //   i: currentPage,
    //   ref: this._children()[currentPage],
    //   from: prevPage,
    // }
    //do something with obj
  }}>
    <Tab heading="Tab1">
      <Tab1 />
    </Tab>
    <Tab heading="Tab2">
      <Tab2 />
    </Tab>
</Tabs>

edited Sep 19 '17 at 14:16

answered Sep 19 '17 at 06:46

Vahid Boreiri

3,418
1
19
34

can we know which tab is switched to ? – Mahmoud Abd AL Kareem Sep 19 '17 at 13:09
Yes you can access this kind of info. I update my answer and also you can see the source code of `Tabs` component here: https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/Tabs/index.js – Vahid Boreiri Sep 19 '17 at 14:13
Happy to help you. – Vahid Boreiri Sep 19 '17 at 17:59

native-base tabs doesn't call lifecycle method componentWillUnmount

1 Answers1