I'm trying to reset navigation stack each time I'm reaching a specific screen (in my case, the home page).
Here's the piece of code:
componentDidMount(){
const { navigation } = this.props
this.focusListener = navigation.addListener('focus', () => {
this._getData()
console.log('coucou')
navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [
{ name: 'Home' },
],
})
);
});
this._updateNavigationParams()
}
componentWillUnmount() {
// Remove the event listener before removing the screen from the stack
this.focusListener.remove();
}
If I remove the following part, no problem my code is running correctly :
navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [
{ name: 'Home' },
],
})
);
I need a listener since I have to refresh data when I'm back on HomeScreen, and I also would use it to reset navigation stack each time I come back here.
The error I get is :
TypeError: this.focusListener.remove is not a function. (In 'this.focusListener.remove()', 'this.focusListener.remove' is undefined).
Ok, so what found on the net (use .RemoveListener() or .Remove() on the ComponentWillUnmount() function) no longer works.
Just looking at the react navigation documentation gave me the solution (here) I just have to call the const created with the listener. In my case I have to modify ComponentWillUnmount like this
componentWillUnmount() {
// Remove the event listener before removing the screen from the stack
this.focusListener();
}