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

Ionic Framework
1

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?

Thanks

2

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

3

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.

4

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

IonicModule.forRoot({
   navAnimation: iosTransitionAnimation
})

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

5

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.

7

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
8

This just flashes for me, no animation.