isFocused not updating after first navigation

[robertherber]

I've tried both approaches and end up with the same result:

// 1. 
const { isFocused } = useNavigationFocus()

// 2. 
const navigation = useNavigation();
const isFocused = navigation.isFocused();

This is in the context of a Tab Navigator. The first time I switch tab isFocused is updated - but after the initial render it doesn't update.

For now I went back to use withNavigationFocus- I get a feeling this package needs some more testing before using! :)

[slorber]

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 :/

[robertherber]

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;

[slorber]

@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)

[slorber]

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

[slorber]

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