How do I get listeners to work with react-navigation and redux

[warrenbell]

I am trying to get a listener to work. I need to know when a transition is complete. I am registering a listener like this:

this.props.navigation.addListener('didFocus', (payload) => console.warn('did focus')),

I stepped through the code and I am confused with the following:

function createReduxBoundAddListener(key: string) {
  invariant(
    reduxSubscribers.has(key),
    "Cannot listen for a key that isn't associated with a Redux store. " +
      "First call `createReactNavigationReduxMiddleware` so that we know " +
      "when to trigger your listener."
  );
  return (eventName: string, handler: NavigationEventCallback) => {
    if (eventName !== 'action') {
      return { remove: () => {} };
    }
    const subscribers = reduxSubscribers.get(key);
    invariant(subscribers, `subscribers set should exist for ${key}`);
    subscribers.add(handler);
    return {
      remove: () => {
        subscribers.delete(handler);
      },
    };
  };
}

So according to the createReduxBoundAddListener function, the eventName has to be "action" or addListener does nothing. So I tried "action" and assumed I was suppose to read the eventName from within my handler and then do something. I also am assuming that addListener should only be called once. My handler never gets called as far as I can tell.

What am I missing ?

[warrenbell]

After stepping through the code a little more, it looks like I can only listen to events of type "action". How do I listen to other events of type "willFocus", "willBlur", "didFocus" and "didBlur" ?

[Ashoat]

@warrenbell, the eventName != 'action' condition is copied from react-navigation. I am not sure why the condition is there in the first place; I'd suggest posting an issue in the main react-navigation repo to find out.

The intention of this library is to provide the same functionality available with the out-of-the-box state management in react-navigation. I don't want to provide functionality react-navigation doesn't, as I imagine this functionality isn't meant to be supported in react-navigation.

[computerjazz]

Are you passing the react-navigation middleware into createStore? This was missing from the docs and tripped me up.

import {createStore, applyMiddleware} from 'redux';  
import reducer from './reducer';  
import { createReactNavigationReduxMiddleware } from react-navigation-redux-helpers

const middleware = createReactNavigationReduxMiddleware("root", state => state.nav);

const store = createStore(
    reducer,
    applyMiddleware(middleware)
  );

<Provider store={store}>
... etc

[warrenbell]

@computerjazz Thanks, I had that covered. It just looks like the other event types are not handled yet in createReduxBoundAddListener of this package.

[computerjazz]

But you're not getting the onFocus, onBlur, etc events? I have my nav hooked into redux and am receiving all events after making the above change.

[warrenbell]

@computerjazz I have almost the same code as you. What version of react-navigation are you using ?

[computerjazz]

react-navigation 1.5.11

Here's a sample project: https://github.com/computerjazz/ReactNavigationRedux App.js Navigator.js ItemDetail.js

The only weirdness I'm seeing is that

• didBlur is not called when navigating back from ItemDetail. Perhaps the component is no longer mounted at the time it would be called -- I think I've seen didBlur called when using a TabNavigator.
• I'm not seeing the actions called when navigating back via pull-from-edge gesture.

[Ashoat]

For the first one, you’re saying your event listener is not triggered for didBlur, right? Does it get triggered when not using Redux integration?

[computerjazz]

@Ashoat correct. I'm not sure if it's called when not using Redux, I haven't tested that.

[Ashoat]

Based on the code snippet I posted above, I think the answer is no. As far as I understand, this just isn’t a behavior that react-navigation supports.

[computerjazz]

Makes sense. And I just confirmed that didBlur does get called when navigating forward. So I'm thinking the component unmounts before didBlur is called when navigating back.

[warrenbell]

@computerjazz I am using an older version of react-navigation that does not have those events implemented yet. But I am still confused as to how it even works based on the code in this package createReduxBoundAddListener function that seems to just ignore every event type other than 'action'. Did you use createReduxBoundAddListener in your code ? How are you adding event listeners ?

[computerjazz]

@warrenbell I haven't spent the time to understand what goes on under the hood, but I've included everything in the sample files above ^^

[warrenbell]

@computerjazz Our code is the same. I will get react-navigation upgraded to a version that has these events and go from there. Thanks

[jsina]

@computerjazz listener hasn't work still for me, I was also created the issue in your github project.

[Ashoat]

react-navigation-redux-helpers@1.1.1 introduces a new export called createDidUpdateCallback that should fix this issue. Refer to the docs for how it's used.