How can I execute the same function on each screen with React Navigation? I'm using React Native and TypeScript. I have a navigation with home, profile, etc...
I have the below function and I want it to be executed when you navigate to profile, home, etc.
const getFunction = (): void => {
console.log("execute function");
};
I tried the below code but it doesn't work:
useEffect(() => {
const listener = navigation.addListener("focus", (e) => {
getFunction();
});
return () => listener;
}, [navigation]);
An overview of my screens:
return (
...
<Stack.Screen
name='home'
component={home}
/>
<Stack.Screen
name='profile'
component={profile}
/>
...
)
Please if you could help me I would really appreciate it!! :)
You can use screenListeners prop on the navigator. This way you can specify listeners for events from all screens. As example like so:
<Stack.Navigator
screenListeners={{
focus: (e) => {
// code you wanna execute goes here
console.log("Focus has changed")
},
}}
>
<Stack.Screen name="home" component={home} />
<Stack.Screen name="profile" component={profile} />
</Stack.Navigator>