Execute the same function on each screen for all screens when they get focused in with React Navigation

Question

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!! :)

Answer 1

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>