How to use mode="ios" for a single component in Ionic 5?

Hello, I want to use ion-router-outlet with mode=“ios” to have the horizontal page transition. It worked well in Ionic 4 but now in Ionic 5, the mode is applied to every children of ion-router-outlet which means all my components get shown in a ios style, even on Android or Web.

How can use the mode attribute like it was on Ionic 4, for the current component only?


Hey there! this is documented in our breaking changes docs, as well as a work-around.

I did read the breaking change docs. The solution provided in the docs is to apply a different mode on the direct children of the component. But there is no mode=“default” I can set on the children, I don’t want to force a mode on all the components of my app! I just want to set a mode on ONE component.

Hmm, alright, so what you could do is set the animation at the config level, but at the moment, the animation is not exported.

   navAnimation: iosTransitionAnimation

We’ll make an issue and mark it for 5.0.6.

I think the mode should be able to be set in a non-recursive manner like it was on Ionic 4. I can think of many cases it could be useful, like having an <ion-item> in a certain mode, but keep his <ion-icon> child in the default mode of the device.

I can finally update my project to Ionic 5! Thanks for this quick update!

For React users in the same situation, use this:

import { iosTransitionAnimation } from '@ionic/react';

setupConfig({ navAnimation: iosTransitionAnimation });

1 Like