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)
Somehow missed this one to check Will respond soon