Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Component LifeCycle method only being triggered for first time?

See original GitHub issue

Issues

Under Tabs component, I’ve bind only one specific component and distinguish them based on props. While tab active, this component are expect to re-render or sorts to get the relevant values. However, it seems that component lifecycle method only being executed first time for each and every tab. Meaning if we revisit the tab once again, none of component lifecycle method will being invoke.

react-native, react and native-base version

"native-base": "^2.4.2",
"react": "16.0.0",
"react-native": "0.52.0",

Expected behaviour

Component lifecycle method will be invoked everytime a tab changed.

Actual behaviour

Component lifecycle method only being invoked for first time each tab active. Component Lifecycle method will not be invoked again if the tab is revisit.

Steps to reproduce (code snippet or screenshot)

<Tabs 
  initialPage={this.props.day}
  tabBarUnderlineStyle={{ backgroundColor: '#5AF158' }} 
  renderTabBar={() => <ScrollableTab />}>
  {this.renderTabHeader()}
</Tabs>

renderTabHeader() {
  return (
    this.props.dateArray.map((date, i) => 
      <Tab 
        key={i}
        heading={date.format('DD/MM')} 
        tabStyle={styles.tabStyling} 
        activeTabStyle={styles.activeTabStyle} 
        textStyle={styles.tabTextStyle} 
        activeTextStyle={styles.activeTabTextStyle} 
      >
        <View style={{ backgroundColor: '#EEEEEE', flex: 1 }}>
          <Content contentDate={date.format('YYYY-MM-DD')} />
        </View>
      </Tab>
    )
  );
}

Content Component:

class Content extends Component {
  componentWillMount() {
    console.log('Component Will Mount() ?');
    this.props.loadTransactionByDate({ date: this.props.contentDate });
  }

componentWillUpdate(nextProps, nextState) {
  console.log('Component Will Update() ?');
}

render() {
  return (
    <View><Text>{this.props.contentDate}</Text></View>
  );
  }