Guide around doing some action after re-focusing a screen

[brentvatne]

Cover both withNavigationFocus and addListener

[ghost]

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

[ghost]

@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 ?

[ghost]

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

[alishaevn]

This is how I solved the problem of a page not refreshing after using goBack():

componentDidUpdate(prevProps) {
      if(prevProps.isFocused !== this.props.isFocused) {
        (insert whatever actions here that you need for the page to refresh. 
         for me it was dispatching the action that would "reload" my props)
      }
}

[amirhosseinkh2515]

@alishaevn thank you it worked for me

[miliu99]

I'm struggling with hooks...the easiest I got is to do useEffect like

const { loading, data, refetch } = useQuery(Query_Data)

  useEffect(()=> {
      refetch()
  }, [refetch])

This works for history.goBack(), however, it also doubles server call when browser refreshes (one from useQuery and one from useEffect). To work around this problem, I added a global property "global.refreshOnGoBack" which is set to true before I call history.goBack(), and then

  useEffect(()=> {
    if (global.refreshOnGoBack) {
      refetch()
      global.refreshOnGoBack = false
    }
  }, [refetch])

It seems to work fine, but I don't like it. Any better idea?

[seyedasfar]

This works for me, Using useEffect with isFocused updates the current component state after goBack() invokes

import { useIsFocused } from "@react-navigation/native";

const isFocused = useIsFocused();
useEffect(() => {
 // do something
}, [isFocused]);

[miliu99]

Is there an equivalent of useIsFocused for non-native? @usama-asfar do you get useEffect called on initial load as well? So, is "do something" called twice on initial load?

Another situation is that you may not always want to call "do something" when go back. For example, I have a popup dialog for editing. If I click Cancel button, it should go back without calling "do something" because nothing has changed (in my case "do something" is refetching data from server).

[seyedasfar]

@miliu99 that solution has some downsides like it invokes two times, for my case it should update its current state and re-render, it works fine. And fetching data to showing dialog won't work properly

[satya164]

https://reactnavigation.org/docs/function-after-focusing-screen/

[samimhakimi]

This works for me, Using useEffect with isFocused updates the current component state after goBack() invokes

import { useIsFocused } from "@react-navigation/native";

const isFocused = useIsFocused();
useEffect(() => {
 // do something
}, [isFocused]);

Thanks it worked for me also.

[WinnieWangs]

This works for me, Using useEffect with isFocused updates the current component state after goBack() invokes

import { useIsFocused } from "@react-navigation/native";

const isFocused = useIsFocused();
useEffect(() => {
 // do something
}, [isFocused]);

This code is not working when use native back button.