Ionic 6 with React - no animation on page navigation

Question

I'm building an Ionic React (using Ionic 6 and Capacitor) application. I have two pages, Home and Profile. I want to navigate between the home page and profile page, it is working but there is no push animation on the iOS simulator.

This is my Router (on App.tsx):

 <IonApp>
     <IonRouterOutlet>
      <IonReactRouter>
        <Route exact path="/home" component={Home} />
        <Route exact path="/profile" component={Profile} />
        <Route exact path="/" render={() => <Redirect to="/home" />} />
      </IonReactRouter>
    </IonRouterOutlet>
 </IonApp >

Home and Profile of course have IonPage as the root element.

return (
        <IonPage>
            ...
            ...
       </IonPage>
);

I use useIonRouter hook, like this:

 const router = useIonRouter();
 const displayProfile = () => {
    router.push('/profile', 'forward', 'push');
};

It does go to the Profile page, but with no animation at all. I couldn't find anything but basic examples on their website for the this.

Purlieu

maybe this will help #58452659 – Pyramidal

@Pyramidal Thank you, I read this before posting, and it does actually work, but as I said, I don't see the animation being played. – Purlieu

Do you have a IonRouterOutlet in the Home and Profile pages? – Hemocyte

@Hemocyte No, I copied the docs and I didn't see where they added it. I do have the RouterOutlet on the App.tsx – Purlieu

It's strange that not even the code examples from the docs work... – Hemocyte

Have you found a solution ? I struggle with the same issue... – Phaedrus

Answer 1

the page you are going to should contain IonContent inside IonPage

Flourishing

Answer 2

Per the official example, be sure to include the CSS

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

Lindquist