React navigation call a function on each screen change

Question

I'm looking for a way to call a function on each screen to track user interaction with each screen. so for example:

function track(screenName){
 console.log(screenName)
}

function ScreenA(){
 track('ScreenA')
 return <View />
}

function ScreenB(){
 track('ScreenB')
 return <View />
}

Instead of having to call the function manually in each screen separately , I believe there has to be a way to do it from the navigator directly. I'm using :

react-navigation 5.9 
react-native 0.65

Answer 1

using @sushrut619 answer i applied the following :

export function App(){
  const [routeName, setRouteName] = React.useState('Unknown');

return (
   ...
   <NavigationContainer
     linking={linking}
     onStateChange={state => {
      const newRouteName = getActiveRouteName(state);

      if (routeName !== newRouteName) {
       setRouteName(newRouteName);
       //use whatever tracking function you want with newRouteName
      }
     }}>
     <MainAppStack />
    </NavigationContainer>
   ...
  );
}

and in a different utility file i added this function :

export function getActiveRouteName(state: NavigationState | PartialState<NavigationState> | undefined): string {
  if (!state || typeof state.index !== 'number') {
    return 'Unknown';
  }

  const route = state.routes[state.index];

  if (route.state) {
    return getActiveRouteName(route.state);
  }

  return route.name;
}