How to create a swipeable card style modal with Ionic Framework and React

[@AlanMontgomery]

If this video helped you out, let me know here in the comments! If you haven't subscribed yet, consider hitting that sub button!

[@MrAvelino2010]

Hello There, can you make tutorial how to create a pwa with ionic react using js not ts

[@MrAvelino2010]

by now i would like to know the instruction to use js not ts when start new ionic project, wich flag i have to pass

[@kwabenaboateng7405]

I learnt a great deal of new stuff from this video. You're good !!!

[@AlanMontgomery]

Thanks so much’ I’m glad it has helped out!

[@MrAvelino2010]

Two years ago a created a mathematic dictionionary , the ui didn´t look so pretty , with this template that´s gonna rock

[@AlanMontgomery]

Awesome!!!

[@Mr_BetaMax]

Thanks! This was very helpful

[@AlanMontgomery]

No problem! Glad it helped!

[@WilliamJuan]

Awesome stuff! 🔥

[@AlanMontgomery]

Thanks William!!!!

[@XxX__GAMER__XxX]

Hello, this video seems very close to what I was looking for but I'm just a bit lost. Where did the showModal and hideModal functions come from? Did you write them in your NewModal.jsx file? Are they already pre-written by some other library in Ionic? Any help is super appreciated! Great video by the way!

[@AlanMontgomery]

Hey man. Check out 2:30. It comes from the useIonModal hook

[@mafiakingc]

Dope👌

[@AlanMontgomery]

Thanks man! Much appreciated!!

[@simonmorris3780]

How would I do multiple pages in a card style modal like when you are creating a group in whatsapp it first goes to a list of contacts then when you click next it does a nice slide transition to a new page within the same modal how would I replicate that? would it be two modals or 1 modal with two pages?

[@AlanMontgomery]

Hey Simon - There are multiple ways you could achieve this - You could hold each "page" inside a swiperjs slide but don't allow swipe to slide, and just slide the different "views" into the main content area upon a button click - Alternatively, you could just use another modal, which is what is called "stacked" modals - you can use the main ref of the previous modal as the presentingElement and the new modal will appear on top of the previous and so on!

[@simonmorris3780]

@@AlanMontgomery yeah I tried the stacked way but I dont think its what i'm looking for as they appear like they are separate. I want one modal but multiple screens my next thought was that yeah the slides component. I'll give that ago thanks Alan! great content by the way!

[@AlanMontgomery]

Awesome man! Remember the ion slides will be deprecated soon so be best to use swiper! I have a video on it if you need!! Man I really appreciate that a lot! Thanks so much!

[@nobodyeverybody8437]

Why react???

[@AlanMontgomery]

It’s what I am an expert in

[@nobodyeverybody8437]

@@AlanMontgomery fair enough 👌 👏