Ionic 5 / iOS13 card style modal using Capacitor

Capacitor
1

My question ties into #18660

We have recently updated our project to:

"@capacitor/cli": "^1.5.0",
"@ionic/angular": "^5.0.0",
"cordova-ios": "~5.1.1",

We’re building the App using Capacitor.
I was expecting modals to appear in the new iOS13 card design,
but that is not the case. Is that because of Capacitor or what am I missing?

The presentation implementation is relatively straight forward:

...
const presentingElement = await this.modalController.getTop()
const modal = await this.modalController.create({
  component: DropDownModalComponent,
  swipeToClose: true,
  presentingElement: presentingElement,
  componentProps: {
    'header': header,
    'options': options
  }
})

await modal.present()
...

Any help is highly appreciated.

2

Please install @ionic/angular Version 5.0.1 and try again

3

Since this is a UI component concern, it falls under Ionic Framework - not Capacitor.

See the docs on Swipeable modals - my guess is something is wrong with the presentingElement, since the only other requirement is to set swipeToClose to true.

Are you presenting a card-style modal from within another modal? If not, see the other instructions that use router outlet.

4

@netkow What if we are using modal inside modal? Then what will be the presenting element?