Ionic 6 with React - no animation on page navigation

Viewed 694

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.

1 Answers

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';
Related