reduxifyNavigator is causing this.props.navigation.addListener('didFocus') to not work about redux-helpers HOT 26 CLOSED

@Ashoat I am facing with the same issue. I am using Infinite Red's Ignite boilerplate (Andross), and the issue exists on a completely clean install. I created a somewhat MCVE (a clean Ignite Andross install), you can find it on https://github.com/bencergazda/react-navigation-redux-helpers-issue-53

I could not catch any event at all, but the implementation looks to be OK. Could you please have a look at it?

By default Andross uses [email protected] and [email protected], but upgrading to [email protected] and [email protected] still doesn't help.

FYR: I tried below and it works :

• ReduxNavigation.js , export Middleware instead of just createReactNavigationReduxMiddleware

export const appNavigatorMiddleware = createReactNavigationReduxMiddleware(
  'root',
  (state) => state.nav
)

• then import to CreateStore.js and modify as below.

import {appNavigatorMiddleware} from '../Navigation/ReduxNavigation'

/* ------------- Navigation Middleware ------------ */
  // const navigationMiddleware = createReactNavigationReduxMiddleware(
  //   'root',
  //   state => state.nav
  // )
  // middleware.push(appNavigatorMiddleware)
  middleware.push(appNavigatorMiddleware)

from redux-helpers.

xxyan0205@b7299f5

fixes the issue for me.
Using react-navigation 2.17 and redux-helpers 2.0.6

adding the timeout around didUpdateCallback works

setTimeout(() => {
  didUpdateCallback();
}, 0);

@Ashoat can you please merge it and release a new version?

from redux-helpers.

@Ashoat I am facing with the same issue. I am using Infinite Red's Ignite boilerplate (Andross), and the issue exists on a completely clean install. I created a somewhat MCVE (a clean Ignite Andross install), you can find it on https://github.com/bencergazda/react-navigation-redux-helpers-issue-53

I could not catch any event at all, but the implementation looks to be OK. Could you please have a look at it?

By default Andross uses [email protected] and [email protected], but upgrading to [email protected] and [email protected] still doesn't help.

from redux-helpers.

Hey @Ashoat - I'm running into the same issue and did verify that #60 fixed it for me locally. I'm on react-navigation 2.4.1 and react-navigation-redux-helpers 2.0.5. I'll see if I can put together a repo with a repro later today.

from redux-helpers.

Thanks for setting up the repro repo. I'll try and take a look today.

from redux-helpers.

I think I have fixed this in [email protected]. Please give it a try and let me know if it works.

from redux-helpers.

I had trouble making a repro-able case when I tried last week, for what it's worth. I tried building something from scratch using all the same packages and package versions and didn't get the buggy behavior, so there's something more subtle going on than just a bad combination of dependency versions.

I'll try going the other direction (taking my app and breaking it down to a simple repro case), but it might be a while before I get a chance -- so if somebody else has time and beats me to it, please do.

from redux-helpers.

I am also experiencing this issue randomly. Can't find out the exact reason. On some screens it does work as expected, but on the others they don`t within the same navigator. Hope this will be fiixed soon.

from redux-helpers.

I was able to reproduce it again with the Android back button depending on how nested navigation stack you have.

Will try to reproduce on the repo that I've created.

from redux-helpers.

Hi @Ashoat sorry I haven't had the time yet

from redux-helpers.

i'm using this tut and not word @Ashoat

componentDidUpdate(){
        setTimeout(() => {
            this.props.navigation.addListener('didFocus', () => {
                this._handleDefaultLoad();
            });
        }, 0);
    }	     

from redux-helpers.

has it been well tested?? Im facing the same problem u.u please help

setTimeout(() => {
this.props.navigation.addListener('didFocus', () => {
this._handleDefaultLoad();
});
}, 0);

from redux-helpers.

Any luck @diegoddox?

from redux-helpers.

Hi, I'm also suffering the issue...
I add listeners for willFocus, willBlur, didFocus and for didBlur but none works...
I'm working with the version 2.0.5.

from redux-helpers.

Hey guys - the fix in xxyan0205@b7299f5 is to gate the didUpdateCallback behind a setTimeout call. This seems to indicate that didUpdateCallback is firing too early.

The problem with the fix is that it is brittle. It may work on your simulators, but will it work on physical devices? On old devices? A new version of React Native or React Navigation might make it break, or force us to increase the timeout value.

The real solution is to figure out why calling didUpdateCallback immediately in componentDidUpdate doesn't work, and what needs to happen first. Then we can update the code to call didUpdateCallback exactly when it needs to.

I am willing to investigate this issue and try to figure out what the right solution is. If the setTimeout is the only thing that works, I will merge it (though I doubt that).

But first, I need either an Expo Snack or a repo that has a minimal project that reproduces the issue. This is an expectation in the React Navigation org, and in the broader React Native ecosystem. It is nigh-on impossible to debug and fix issues when you aren't able to reproduce them.

To be absolutely clear: if you want a fix for this issue to be merged, then please take the time to create either an Expo Snack or a repo that reproduces the issue. Copy-pasting code will not suffice, nor will linking me to your existing project.

from redux-helpers.

hey @Ashoat,

here is an example that I found on a different thread that should be sufficient for your investigation
https://snack.expo.io/@mrloh/tabnavigator-with-redux-didfocus

from redux-helpers.

@shyaniv7, you've linked to a Snack that is using an outdated version of this package, and that is demonstrating a related but distinct issue that has long been fixed.

from redux-helpers.

@Ashoat 💩 I apologize, this is the wrong link. I cannot find the example I saw a few days ago

this is another thread with the same issue described
react-navigation/react-navigation#4670

from redux-helpers.

Hi @Ashoat!

this issue has been fixed?

from redux-helpers.

The original reported issue was fixed. The second reported issue still doesn’t have a repro. There is a hack in #60 that may help avoid the second issue if you’re experiencing it.

from redux-helpers.

I can investigate further if you can provide an MCVE that reproduces the issue, in the form of an Expo Snack or a react-native init'd repo hosted on GitHub.

from redux-helpers.

Are you able to reproduce without Ignite? If yes, can you put up an MCVE (as specified above, either through Expo Snack or react-native init). If not, I'd guess it has something to do with the interplay with Ignite?

from redux-helpers.

has it been well tested?? Im facing the same problem u.u please help

setTimeout(() => {
this.props.navigation.addListener('didFocus', () => {
this._handleDefaultLoad();
});
}, 0);

mee too

from redux-helpers.

@Ashoat I am facing with the same issue. I am using Infinite Red's Ignite boilerplate (Andross), and the issue exists on a completely clean install. I created a somewhat MCVE (a clean Ignite Andross install), you can find it on https://github.com/bencergazda/react-navigation-redux-helpers-issue-53
I could not catch any event at all, but the implementation looks to be OK. Could you please have a look at it?
By default Andross uses [email protected] and [email protected], but upgrading to [email protected] and [email protected] still doesn't help.

FYR: I tried below and it works :

• ReduxNavigation.js , export Middleware instead of just createReactNavigationReduxMiddleware

export const appNavigatorMiddleware = createReactNavigationReduxMiddleware(
  'root',
  (state) => state.nav
)

• then import to CreateStore.js and modify as below.

import {appNavigatorMiddleware} from '../Navigation/ReduxNavigation'

/* ------------- Navigation Middleware ------------ */
  // const navigationMiddleware = createReactNavigationReduxMiddleware(
  //   'root',
  //   state => state.nav
  // )
  // middleware.push(appNavigatorMiddleware)
  middleware.push(appNavigatorMiddleware)

You save my life! :)
I had a problem with black screen camera after switching tab, and now it works!

from redux-helpers.

@Ashoat I am facing with the same issue. I am using Infinite Red's Ignite boilerplate (Andross), and the issue exists on a completely clean install. I created a somewhat MCVE (a clean Ignite Andross install), you can find it on https://github.com/bencergazda/react-navigation-redux-helpers-issue-53
I could not catch any event at all, but the implementation looks to be OK. Could you please have a look at it?
By default Andross uses [email protected] and [email protected], but upgrading to [email protected] and [email protected] still doesn't help.

FYR: I tried below and it works :

• ReduxNavigation.js , export Middleware instead of just createReactNavigationReduxMiddleware

export const appNavigatorMiddleware = createReactNavigationReduxMiddleware(
  'root',
  (state) => state.nav
)

• then import to CreateStore.js and modify as below.

import {appNavigatorMiddleware} from '../Navigation/ReduxNavigation'

/* ------------- Navigation Middleware ------------ */
  // const navigationMiddleware = createReactNavigationReduxMiddleware(
  //   'root',
  //   state => state.nav
  // )
  // middleware.push(appNavigatorMiddleware)
  middleware.push(appNavigatorMiddleware)

Superb. You saved me a thousand of minutes breaking this problem

from redux-helpers.

shyaniv7/react-navigation@2059422 mentioned in react-navigation/react-navigation#4670 (comment) works for me.

from redux-helpers.