feat: Lifecycle events not working on IonNav components

[FernetB]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

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

1. Start in a page with <IonNav />
2. Push another page that have IonViewWillEnter and IonViewWillLeave
3. Then go back

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

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

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.

[FernetB]

Added code reproduction, but I guess if u are requesting me that, implies that lifeclycle should work on ionNav

[averyjohnston]

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 IonNav is not meant to be used for. (This is described at the top of the Nav docs.) The lifecycle events are not expected to fire when pushing ExploreContainer in an IonNav. IonNav does have its own lifecycle events, which you may find useful: https://ionicframework.com/docs/api/nav#events

However, I would expect the lifecycle events to fire when landing on or leaving the /nav-bug path, since that triggers a routing change on the Outside view. This is not currently happening because Outside does not use the IonPage component, which is required for routing. If I wrap Outside in <IonPage></IonPage>, the lifecycle hooks fire as expected.

Can you try the IonNav events and/or wrapping your views in IonPage and let me know if that works for your use case?

[FernetB]

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.
For example, if i want to handle the hardware back button on each view differently with the current tools seems impossible because the "mounted" nav components that are hidden will be also listening to the back button and this will lead to unwanted behaviors. (With router lifecycles i could subscribe in the ionViewWillEnter and unsubscribe in the ionViewWillLeave)

[averyjohnston]

If the ionNavWillChange event included what component is entering, would that solve things for you? Currently it doesn't emit any detail.