OnDidFocus event not working when you navigate back from the stack

Question

I'm trying to test the OnDidFocus event in my React Native app using react navigation 4 and using the following event listener:

useEffect(() => {
    const willFocusSub = props.navigation.addListener(
      "onDidFocus",      
      console.log("testing onDidFocus")      
    );

    return () => {
      willFocusSub.remove();
    };
  });

When I first load the page it works fine but when I move away and then come back to the same screen through the Back button it does not seem to perceive the focus event.

This is my stack

const MovieNavigator = createStackNavigator(
  {
    MoviesList: HomeMovies,
    MovieDetail: MovieDetailScreen,
    PopularMovies: PopularMoviesScreen,
    CrewMember: CastDetailScreen,
    GenreSearch: GenreSearchScreen,
    MovieSearch: MovieSearchScreen,
  },

I'm in MoviesList and the event is triggered fine, then I move to MovieDetail. If I hit Back and return to MoviesList the event onDidFocus is not triggered at all.

Answer 1

I found another way to detect the focus and blur event and seems the only way to track an event when using the Back button.

Instead of subscribing to events, I'm check the focus status of the screen using the useIsFocused() hooks available from react-navigation-hooks library.

import { useIsFocused } from "react-navigation-hooks";
...
const [showGallery, setShowGallery] = useState(true);
...
useEffect(() => {
    if (isFocused) {
      setShowGallery(true);
    } else {
      setShowGallery(false);
    }
    console.log("isFocused: " + isFocused);
  }, [isFocused]);

Basically I'm checking the status of the screen using isFocused hook every time it changes (when it leaves and returns only same as didFocus and didBlur) and setting the state setShowGallery accordingly to run the carousel when focused and stop it when blurred.

Hope it helps others!