How can you call a function on any navigation event in React Native?

QUESTION
How can you call a function on any navigation event in React Native?

We are attempting to carry out a dormancy break for a respond local application. We would like the break to invigorate when a client collaborates with the application, as well as while exploring between screens.

At present, on a client cooperation occasion the resetInactivityTimeout() callback capability is set off. We are attempting to likewise set off this callback on any route occasion. For our situation, this is the point at which a stacking screen has gotten information it required and pushes another screen onto the route stack.

App.js contains our Guides, the Clock, and the reset clock callback

import UserInactivity from 'react-native-user-inactivity';
...
const MainNavigator = createStackNavigator(
    // Screen Definitions 
)

const App = createAppContainer(MainNavigator);



export default function () {

   const resetInactivityTimeout = useCallback(() => {
       // reset logout timer
   }

   return ( 
        <UserInactivity
          timeForInactivity={500}
          onAction={(isActive) => {
              if (isActive && !modalVisible) {
                   resetInactivityTimeout();
             }
          }}>
              <App
              ref={(nav) => {
                 navRef.current = nav;
              }}/>
       </UserInactivity>
  )
}

Answer

The React Navigation V4 Documentation on App Containers gives information about several useful navigator methods

onNavigationStateChange exposes the API for all navigation state change events

From the Docs

onNavigationStateChange(prevState, newState, action)​

Function that gets called every time navigation state managed by the navigator changes. It receives the previous state, the new state of the navigation and the action that issued state change. By default it prints state changes to the console.

import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

const MainNavigator = createStackNavigator(
  {
     ... // Screens
   }
const App = createAppContainer(MainNavigator);

export default function () {

  return (
            <App
              ref={(nav) => {
                navRef.current = nav;
              }}
              onNavigationStateChange={(newState) => console.log('state updated:' , newState)}
            ></App>
  )
}

Might be worth mentioning that React Navigation V5 forward no longer uses createAppContainer so you do not interact with navigation state change events in the same way.

After React Navigation V4, AppContainer was was abandoned for the NavigationContainer as the top-level container and the onStateChange prop functions similarly to AppContainer's onNavigationStateChange event, shown below

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer onStateChange={()=> console.log(do something)}>
       {/* Rest of your app code */}. 
    </NavigationContainer>
  );
}