isFocused not updating after first navigation about hooks HOT 5 CLOSED

I just did a direct implementation that I think is stable that doesn't depend on anything but the useNavigation() hook, maybe it can be of help:

import { useState, useEffect } from 'react';
import { useNavigation } from 'react-navigation-hooks';


const useIsFocused = () => {
  const navigation = useNavigation(),
        [isFocused, setFocused] = useState(navigation.isFocused());

  useEffect(() => {
    const didBlur = () => setFocused(false);
    const didFocus = () => setFocused(true);

    const blurSubscription = navigation.addListener('didBlur', didBlur);
    const focusSubscription = navigation.addListener('didFocus', didFocus);

    return () => {
      blurSubscription.remove();
      focusSubscription.remove();
    };
  }, []); //eslint-disable-line

  return isFocused;
};

export default useIsFocused;

from hooks.

Hi,

I can confirm, it's an existing bug in the event hook which affect focus as well.
Made this PR long time ago to fix this: #8

I'd like to get this fixed soon, but need to improve the lib's DX first. There's no tests and no example app. I've a pending PR which does not work yet for the example app: #28

This package was written at a time where RN didn't even have hooks. Will try to make this a viable lib over time but quite busy atm :/

from hooks.

Will be fixed by #38, going to merge/release soon

from hooks.

@robertherber what is useNavigationFocus() ?

Actually I'm looking at the code and don't see it. There is "useFocusState().isFocused" and according to my tests and the code I'm reading, it's working.

Is useNavigationFocus() a custom hook you built on events? I suspect you have a custom hook, and you initialize focus state to false, and the initial focus event is not fired on mount (which I'm currently correcting)

from hooks.

should be fixed by release 1.0.3 and #38, please tell me if everything works

from hooks.