Navigation - React Navigation 'focus' listener is not triggered the first time

Describe the bug If I wrap the screen with register() method the React Navigation 5 ‘focus’ listener is not triggered the first time. This happens also with React Component or PureComponent not just with Functional Component.

Code snippet

...
useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // The screen is focused
      // Call any action
      console.log("FOCUS DETAILS"); // Not triggered the first time
    });
    // Return the function to unsubscribe from the event so it gets removed on unmount
    return unsubscribe;
  }, [navigation]);
...

Repo for reproducing Here you can find an example repository --> https://github.com/alessioemireni/react-native-bundle-splitter-example. It’s a fork of your example repository.

To Reproduce Steps to reproduce the behavior:

1. Open the App
2. See the console log. The ‘Focus Home’ is printed.
3. Click on ‘Go to details’
4. See the console log. The ‘Focus Details’ log is not printed.
5. Go Back.
6. See the console log. The ‘Focus Home’ is printed.
7. Click on ‘Go to details’
8. See the console log. The ‘Focus Details’ log is now printed.

Expected behavior The React Navigation 5 ‘focus’ listener should be triggered.

Smartphone (please complete the following information):

• Desktop OS: [MacOS 10.15.7]
• Device: [iPhone XR, Google Pixel 2 XL]
• OS: [iOS 14.2, Android 11]
• JS enginge [JSC, Hermes]
• Library version [2.0.0]
• React Native: [0.62.2]
• React Navigation: [5.9.2]

[kirillzyusko]

Hi @alessioemireni Thanks for the detailed issue! I will have a look on that.

[alessioemireni]

We decided to use an Hoc with useFocusEffect react navigation Hook due to the fact that that all Screens in main project use focus Listener. I’ll close the issue.