useIsFocused() hook?

[likeSo]

This hook is useful when you implement a FocusAwareStatusBar

[sandulat]

@likeSo isn't this already achievable with useNavigation().isFocused?

[likeSo]

@sandulat I tried use useNavigation().isFocused() to make a FocusAwareStatusBar, this is my code:

import React, { useEffect } from 'react';
import { StatusBar, StatusBarProps } from 'expo-status-bar';
import { useNavigation, usePathname } from 'expo-router';

const FocusAwareStatusBar = (props: StatusBarProps) => {
  useEffect(() => {}, []);
  const navigation = useNavigation();
  const focused = navigation.isFocused();
  const path = usePathname();

  useEffect(() => {
    console.log(
      `Current page is focused: ${focused}, current page name: ${path}`
    );
  }, [focused]);

  if (!focused) return null;
  return <StatusBar {...props} />;
};

export default React.memo(FocusAwareStatusBar);

But when I try push to my page (networking-logger), the output is wired:

 # When back to the homepage
 LOG  Current page is focused: true, current page name: /
 # These two: when pushing to /networking-logger page
 LOG  Current page is focused: true, current page name: /networking-logger
 LOG  Current page is focused: false, current page name: /networking-logger

It seems that the useNavigation() hook will be triggered twice when routing
But the good news is, a FocusAwareStatusBar still working even with no hooks! Maybe it's because of the native-stack?