New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Lifecycle events not working on IonNav components #29133
Comments
Thanks for the issue! This issue has been labeled as Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed. If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue. For a guide on how to create a good reproduction, see our Contributing Guide. |
Added code reproduction, but I guess if u are requesting me that, implies that lifeclycle should work on ionNav |
Thank you for the reproduction, and apologies for the delay. We ask for a repro in order to better understand the problems you're running into. Routing-related issues in particular can get complicated, so it's best to see the code directly. The lifecycle events you've linked to are specific to routing (mapping URL paths to pages), which However, I would expect the lifecycle events to fire when landing on or leaving the Can you try the |
Yes, the events are working, the problem is that i don't have a simple way to know when a component pushed by a nav is active or not. With the route's lifecycles that would be easy to do, but without it is nearly impossible. |
If the |
Yes, i think it could solve it, but it would be a lot better if you could do something like the I think that if you could know wich component is on view and wich isn't because of the ion-page-hidden logic. You could do what i said before, i'm correct? |
I spoke with the team on this, and there are a couple of other solutions that may work better:
Can you let me know if either of these work for your use case, and if neither of them do, why not? I want to make sure any features we add will solve your use case without needing extra unneeded APIs. |
I tried the first but didn't succeed because i didn't know how to do the comparition between the |
Thank you for the details. After talking with the team about this some more, we agree that there is room to improve with the way lifecycle events are handled in Note that any changes will also apply to Vue, since the two routing integrations have very similar code. |
That's awesome, thank you! |
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
If I try to use the Lifecycles on Nav components it does not work.
Navigating between Components inside a IonNav does not fire the lifecycle hooks.
This is frustrating because I want to handle the BackButton event on specifict components but i can't if i don't have this hooks
If i handle it in a useEffect then if i have 4 nav components mounted it will trigger the backButton in all of 4, and I only want to trigger on the current view.
Expected Behavior
To have the Lifecycles working on the nav components
Steps to Reproduce
<IonNav />
IonViewWillEnter
andIonViewWillLeave
You will see that neither of those hooks will trigger
Code Reproduction URL
https://github.com/FernetB/ionic-tabs-bug
No response
Ionic Info
Ionic:
Ionic CLI : 7.1.1
Ionic Framework : @ionic/react 7.7.4
Capacitor:
Capacitor CLI : 5.2.3
@capacitor/android : 5.2.3
@capacitor/core : 5.2.3
@capacitor/ios : 5.2.3
Utility:
cordova-res : 0.15.1
native-run : 1.7.2
System:
NodeJS : v18.16.0
npm : 9.5.1
OS : Windows 10
Additional Information
No response
The text was updated successfully, but these errors were encountered: