Guide around doing some action after re-focusing a screen

[brentvatne]

Cover both withNavigationFocus and addListener

@brentvatne Thanks for answering.. but as i am new to react native not getting where to use this. Please help me with some example.

[pppluto]

@khushboogupta1 you can add your listener like below:

componentDidMount() {
    this._subscribe = this.props.navigation.addListener('didFocus', () => {
     # do you update if need
    });
}

@MrPluto i am using stack navigator. According to your answer what i did is i called my API in 'didFocus', () { "HERE API CALL " }. But still no luck..

[pppluto]

show some code ?

@MrPluto Mailed you

[MarcelZOI]

Hey Girls and Guys,

i have also an problem with redux and react-navigation:

here the structure:

<App>
  <Main>
    <Header/> //this header has an number that displays the items inside the shopping cart value={this.props.cart.elements.length}
    <MainStack>
       <Home>
       <ArtList>
       <ShoppingCart>
    </MainStack>
  </Main>
  <AddCart/> //Modal when saving the Article to the cart it goes Back to the MainStack (navigation.goBack())
</App>

So if i add an item to the cart, the counter inside the header didnt changed. After switching between the stack-screens the number get updated.

@MrPluto i tried the componentDidMount() but the problem is that inside my <Main> this.props.navigation is undefined...

i have the latest version of redux, react-navigation and react-native.

Any ideas?

[MarcelZOI]

@khushboogupta1 i solved it, maybe you also can use it:

i have a NavigationService where i handle all my NavigationActions (e.g. goBack(), navigate()...)
(https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html)

when set the _navigator i also pass a function (in this case _goBackEvent).

function setTopLevelNavigator(navigatorRef, goBackEvent) {
  _navigator = navigatorRef;
  _goBackEvent = goBackEvent;
}

and this function i called in the goback function:

function goBack(){
  _navigator.dispatch(
    NavigationActions.back()
  )
  if (_goBackEvent)
    _goBackEvent();
}

in my class where i added the Stack:

 <StackNav           
    ref={navigatorRef => {
      NavigationService.setTopLevelNavigator(navigatorRef, () => {
        //do anything here when goBack is triggered
      });
    }}
  />

[RodolfoSilva]

In my case i use willFocus:

componentDidMount() {
  this.subs = [
    this.props.navigation.addListener('willFocus', () => {
    }),
  ];
}

componentWillUnmount () {
  this.subs.forEach(sub => sub.remove());
}

It works very well to goBack action.