RN Refresh parent screen after navigating back from particular screens

Question

I have main screen A. From A it's possible to navigate B, C, D screens. In most cases I need to refresh screen A on focus event, only A shouldn't be refreshed when navigating back from D.

How can I implement this scenario in react native using hooks?

Answer 1

I think you can use the react navigation lifecycle events like this

function Profile({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // Screen was focused
      // Do something
    });

    return unsubscribe;
  }, [navigation]);

  return <ProfileContent />;
}

here is the documentation: https://reactnavigation.org/docs/navigation-lifecycle#react-navigation-lifecycle-events

Answer 2

Something like below worked for me

In parent

const OnRefreshNeededFromChild = (isSuccess: boolean) => {
    console.log("On Returned called")
    if (isSuccess) {
        RefreshData()
    }
}


const FromParentToChild = () => {
    navigation.navigate("childpage", { OnReturn: OnRefreshNeededFromChild })
}

In Child

export childFunction(props: any){
    const OnRetun = props.route.params.OnReturn

    const OnButtonClick = async () => {
           .......
    //Calling the parent callback here
    OnRetun && OnRetun(true)
           ......
    }
    
}