Trying to reset navigation throw an error

Question

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).

Answer 1

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

Answer 2

componentDidMount(){
   const { navigation } = this.props 
   this._unsubscribe = 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._unsubscribe();
}