useNavigationEvents do not update listeners across re-renders about hooks HOT 8 CLOSED

Note your implementation using [key] was probably causing troubles because the listener that gets called is the initial arrow function, and does not update as component re-render. The closure might catch variables and change behavior other time.

function MyComp(({someBool})) {
  useNavigationEvents(evt => {
    if ( someBool ) {
      alert("true");
    }
    else {
      alert("false");
    }
  });
  ...
}

If somebool goes from true to false, the behavior of the closure (which has captured the boolean state) change other time. It will keep alerting the initial boolean value, regardless of its current value.

from hooks.

Hey Sébastien, sorry for the delayed response!

I think it would make sense to only subscribe or re-subscribe when the key changes. I had attempted to do this by providing [navigation.state.key] as the second argument to useEffect, but this caused some pretty bad bugs and I haven't had time to investigate.

Can you help debug and fix this?

from hooks.

Yes sure I can try to make a PR soon. Do you have any idea how I could reproduce your "pretty bad bug" caused by providing navigation key? Just to make sure I clear it

from hooks.

I've tried running your dev web server. For unknown reasons I'm unable to yarn link my local react-navigation-hooks correctly. What's your dev setup for this project?

I'm able to edit my local package from npm which is not ideal.

The problem you met is:

  const [events, setEvents] = useState([]);
  useNavigationEvents(evt => {
    // latest state on evt.state
    // prev state on evt.lastState
    // triggering navigation action on evt.action
    setEvents([...events, evt]);
    // evt.type is [will/did][Focus/Blur]
  });

On first render, the event list is empty. The closure capture events = [], and only the first render closure is registered to the event system, you basically, you keep adding the last event to an empty list, because the empty list was captured in the initial closure, and the list does not grow

from hooks.

Hi @ericvicenti

I've made a PR which permit to use a stable callback and only update the subscriptions on key change, and yet avoid the problems mentionned above.
https://github.com/react-navigation/react-navigation-hooks/pull/8/files

Note that with previous implementation (with no useEffect inputs) or with my fix, I still have weird bugs where the navigation listener stops firing after a few events. If I switch from docA to docB it works (I get action events), but as soon as I click to the focused doc again, I get "willBlur/didBlur" events, and then, the listener provided to navigation.addListener never fires again.

Any idea what could be happening?

from hooks.

Also want to point out that the closure the user provide may fire multiple times synchronously, so you want to do this:

  const [events, setEvents] = useState([]);
  useNavigationEvents(evt => {
    setEvents(evts => evts.concat(evt));
  });

Instead of this:

  const [events, setEvents] = useState([]);
  useNavigationEvents(evt => {
    setEvents([...events,evt]);
  });

With the later, of you get willBlur/didBlur firing synchronously, you will get the same closure problem and only capture the last event, because setState is not synchronous

from hooks.

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

from hooks.

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

from hooks.