Is there a way to implement a callback function that executes whenever the screen changes, such as moving from the home screen to the about screen?
Situation
I would like to create a global stack that triggers a callback function whenever any navigation occurs, for purposes like checking user tokens, internet connectivity, location status, etc.
Attempt
I attempted to create a class component for Stack Navigation and used `UNSAFE_componentWillUpdate` to detect any navigation changes.
Code Snippet:
UNSAFE_componentWillUpdate(prevProps, prevState) {
if (prevProps !== this.props) {
console.log('Navigation state has changed');
}
}
Issue Encountered
- The method fails to detect the initial screen (index-zero) - the Home screen.
- It requires code implementation for each stack separately.
My Stack Implementation
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
/>
<Stack.Screen
name="About"
component={About}
/>
</Stack.Navigator>