Hello,
I’m using an <IonTabs> component which contains an <IonRouterOutlet> with the iosTransitionAnimation set as animation. I would like to have an event handler when the transition of the <IonRouterOutlet> starts and finishes.
I want these callbacks at the <IonTabs> / <IonRouterOutlet> level. So using the lifecycle hooks inside their children is not an option.
I tried using the onIonTabsWillChange and onIonTabsDidChange props on <IonTabs> with no success.
I tried extending the animation I am providing to the <IonRouterOutlet> with no success either. This is what I tried. I get no log at all :
import { iosTransitionAnimation } from '@ionic/react';
<IonTabs onIonTabsWillChange={ () => console.log('start?') } onIonTabsDidChange={ () => console.log('end?') }>
<IonRouterOutlet animation={ (el, opts) => iosTransitionAnimation(el, {...opts, ...{ progressAnimation: true, progressCallback: (ani) => { console.log('progress?', ani) }}}) }>
<Route { ... } />
<... />
</IonRouterOutlet>
<IonTabBar ... />
</IonTabs>
Thank you for help!