willBlur, didBlur listener not call about fluidtransitions HOT 12 CLOSED

Experiencing this again with [email protected]

Perhaps an issue in react-navigation. See this thread

from fluidtransitions.

@dtuan I've had a look at your example but are having some troubles finding where in the code these events are generated. Will continue to investigate!

from fluidtransitions.

Hi @dtuan! Thanks for contributing back with your findings. Would you please be so kind to create a simple reproduction of the issue with a short snack? (https://snack.expo.io).

from fluidtransitions.

Hi @chrfalch ,
Here is the simple setup: https://snack.expo.io/BJ8tzC42M

In the example snack I see didFocus and willFocus get called, but blur events not call and isFocused is not correct. So I changed issue's title too.

I think it happens with FluidNavigator nested in DrawerNavigator.

Thanks

from fluidtransitions.

@chrfalch thank you, really appreciate your work,

from fluidtransitions.

I'm still having this issue with the latest version (0.2.3) along with the latest version of react-navigation (2.11.2). That is, willFocus and willBlur events stop firing when navigating back and forth between screens.

I created a new snack with a reproduction of the issue: https://snack.expo.io/rkVKU4O8Q

When navigationg between Master and Detail Screens there should be a log when the different events are triggered. It seems like the correct events are fired when going from Master to Detail. But when going back to Master the didFocus event of the Master Screen is never fired. I guess this could the reason subsequent events are not triggered correctly?

When switching to the built in Stack Navigator ( By uncommenting line 67 and commentiung out line 68 in the snack) the didFocus event is triggered when going back rom Detail to Master and subsequent events seems to fire correctly.

Let me know if the snack is unclear in any way and thanks for a great library!

from fluidtransitions.

Ok ;-) Sorry for closing it down. The problem is that I'm unable to find out where these events are created and what to do with them... Would love some help on this one, @reekris?

from fluidtransitions.

I had a look around the code and I'm not entirely sure how the event system works either tbh :)

But I compared the code between createFluidNavigator.js and the built in StackView.js and noticed a difference in how the onTransitionEnd callbacks are set up. Specifically there is a check wether to perform completeTransition or not.

Here is how it looks in StackView.js:

https://github.com/react-navigation/react-navigation-stack/blob/d6b1f5c9673e7dd5da92cfa4e34fc087ab8e5c01/src/views/StackView/StackView.js#L35

In createFluidNavigator.js there is an added check for !lastTransition.navigation.state.isTransitioning

I tried removing that extra check and it seems to have fixed the issue. Now the didFocus and didBlur events are fired and subsequent events seems to work.

Although I might have broken something else :) I guess there is a reason why that check is there?

from fluidtransitions.

I poked around the react-navigation commit history and found this pull request that removes the second check from the built in Stack navigator:

react-navigation/react-navigation#4115

Maybe it should be removed in this library as well?

from fluidtransitions.

Is there any way I can help to move this issue forward? I'd be happy to provide a pull request with the above change, if you think it is the correct solution.

from fluidtransitions.

Should be fixed in PR #83, release 0.2.5 - anyone wants to test and verify?

from fluidtransitions.

@elzii for me this worked

constructor(props) { super(props); this.listener = this.props.navigation.addListener('didBlur', () => ( // do stuff )); }

but the <NavigationEvents /> didn't

from fluidtransitions.