NativeBase: Component LifeCycle method only being triggered for first time?

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

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 17 (8 by maintainers)

Most upvoted comments

Somehow missed this one to check Will respond soon