I have a custom navbar component using react native router flux :
render() {
return (
<View style={styles.navBar}>
{this._renderNavBarLeft() }
{this._renderNavBarMiddle() }
{this._renderNavBarRight() }
</View>
)
}
_renderNavBarMiddle() {
return (
<View style={styles.navBarItem}>
{ this.state.timeElapsed ? (<Text style={styles.text}>{Moment.utc(this.state.timeElapsed).format('HH:mm:ss')}</Text>) : <Text style={styles.text}>00:00:00</Text>}
</View>
)
}
componentDidMount(){
console.warn("mount")
const intervalId = BackgroundTimer.setInterval(() => {
this.setState({
timeElapsed : new Date() - this.state.startTime,
})
},1000)
}
You can try to include
shouldComponentUpdate(nextProps, nextState) {
// return false, if component should not update
return false;
}
to your left and right navbar components. Probably you need to pass additonal props, to avoid re-rendering.