Creating Custom Gestures with Ionic (Tinder Swipe & Long Press)

[@jester9300]

Hi Simon, excellent video. I also had trouble with activating the "long-press" gesture. Upon investigation it was caused by the "threshold" value that was set to a default of 10. This meant that on desktop, where one can easily keep the mouse still, the pointer did not move enough to overcome the threshold and start gesture capture. SOLVED this by adding the gesture threshold back in and setting it to a lower value (2 in my case, as I vaguely remember that value from HammerJS usage with press events). Anycase, thank you for your thorough tutorials and excellent teaching attitude. Your videos have been a great help while I move from Ionic 3 to Ionic 5.

[@galaxies_dev]

Thanks for digging into this and posting your solution!!

[@Ixtinkt]

For simulator I had to set threshold: 0 to make it working;

[@jared4670]

@@Ixtinkt yeah. if I don't use anything other than 0 it does not activate. Guess I will need to perform more testing on an actual mobile phone. Still want to be able to keep my slide down to refresh gesture as well!

[@dksanket]

Thank you Simon, Awesome video. But how can I make it work for dynamic elements? Say I want to apply 'long-press' gesture for each message in the chat box and the messages are loaded dynamically when I scroll through the page. Any help would be greatly appreciated. Thank you

[@mohammadmollaei6278]

Thanks Simon for great video would you make some tutorials related to IONIC Capacitor API's like social login Thanks!

[@vivienskapuku2388]

Thanks a lot. I have an old built in Ionic3. How can I perform the tinder swipe?

[@therealhaxwell]

Thanks!

[@galaxies_dev]

Thank you!!

[@Trookboss7396]

Wow. Fantastic. Great video. Thank you

[@davidebser2867]

Nice that was exactly what we needed thy :)

[@shivanshsubnani3383]

Hi Simon, I want to apply swipe up gesture like in (InShorts App) and also want an undo of card as well to show the previous card ! can you help me with that ?

[@frank12328]

nice explanations, mmm you know how i prevents to close the keyboard when long press an element?

[@manuelalejandrogalvez8716]

Great video! Thanks Simon.

[@mdomerarafat4611]

Nice video !

[@marcosricardo5213]

Thank a lot, Simon. Cool video!

[@ricardomachado4018]

if I want to go the first position again? when finishes in end, how came back to first position like a cycle?

[@SemEkkelboom]

Does this not work on ion-buttons? I'm running into issues where tapping a button once works, but long pressing does not, even when following your example. Also, tapping with two fingers on two different buttons almost immediately after each other, does not trigger a (click)="functionHere()" event for either of the buttons. Any idea what we're doing wrong?

[@jared4670]

Well I encountered the same issue as sone did in the comments where you need to move the cursor for it to trigger when pressing down. The only problem with this is if you have also implemented the Io nic page refresher, it stops that from happening. Adding the threshold param then causes the gesture to not activate at all...

[@jonnyramen1480]

Awesome video Simon!!!

[@selvaganapathi7930]

There is possible using button click to select or unselect

[@NahueAlberti]

i need the disable this gesture... do you know how to do it?

[@ankitchauhan1790]

hey simon its a great video, really helpfull, but what if i need to swipe a card in both direction (ie. x any y), like in tinder, super like swipe in y direction... can you please provide solution for that, thanks in advance

[@66marten]

At 14:00 the photos are among each other. Then at 14:30 the photos are suddenly on top of each other. But nowhere I can see how this came about. How were the pictures superimposed?

[@rachnasingh8976]

Hi sir, i used ion-segment i have 7 segments but when i swap then last 3 segment tabs are not moved please solve this problem

[@sergeykudryashov9201]

Please show us the end of decimalToHex method

[@Zahirul3]

It was so cool!!

[@igorigor806]

Thank you very much, Simon :)

[@PauloSantos-yu1tn]

Was very cool tutorial. Enjoyed so much. Physics is cool. Thanks good job

[@blakebedford-palmer6676]

I did my tinder swiping using ion-slides with the cube transition (and the slides on each side were a ❤️ and a ❌) But wouldn’t rule out a better way like this

[@mayankkataria7080]

How to get rotation angle in ionic gesture api?

Nice example, useful for animated CRUD functionalities, now everything must look fun, not only functional required nowadays :/

[@galaxies_dev]

Yeah that's right, upload an app with boring design and nobody is going to use it anyway :(

[@israelayokunnu7974]

Thank you!

[@galaxies_dev]

You're welcome!

[@saq.ib01]

Please add Double Click gesture.

[@denniscezar]

Thanks Simon! In future videos, can u do a updated video about Ionic 5 Image Capture & Upload With NodeJS? Thanks!

[@galaxies_dev]

I feel like the image upload changes in every version although Ionic is not really changing that part at all. But yeah, might be a cools idea for a series!

[@tanishqmanuja]

Awesome Content Simon ! , BTW you look like an indian actor Pankaj Tripathi

[@uzroot]

LOL no

[@shubhammore4922]

Thanks you so much Simon for these great content. would you do some videos on augmented reality in ionic. how to build camera filters for editing videos and pictures

[@galaxies_dev]

I guess that's a complicated topic, but I'll add it to my list!

[@prashant43240]

How we restrict last card to move?

[@Mewain]

Hi Simon, how should i do if i want to make a tinder card swippeable, but also vertically scrollable ?

[@galaxies_dev]

Good question, I'm not sure if that actually works... Perhaps you can disable the gesture when a scroll event from the content is received, something like this?

[@jatinkumawat6387]

Hi Simon, thanks for another great video. I am facing problem while following this tutorial in ngAfterViewInit() where you wrote this.cards.toArray(). My console.log says that this.cards.toArray() is not a function. Can you help me out with this?

[@mustafabekec]

Make sure you use this part correctly Not ViewChild @ViewChildren(IonCard, { read: ElementRef }) cards: QueryList; I know why? Because I made the same mistake :)

[@jatinkumawat6387]

@@mustafabekec DUUUDDDDDEEEEEEEE Thank you dude. You literally saved me. I wasted few hours on this mistake. Thank you so much man.

[@jatinkumawat6387]

@@mustafabekec Can you help a bit more please?😅 Simon here used people[ ] which already had 3 elements inside it, but I want to add more in it, say by using random user api - basically by sending a request to http:randpmuser.me/api which will send me some data. Now I want to show this new data as well in tinder cards Can you help mere here 😅😅

[@AnkurShah_CS]

isn't there a direct longpress kind of thing in ionic? I want to use it on ion-item, in a list, but no luck! I tried longpress, press, keypress, keyup,... nothing worked!

[@galaxies_dev]

No there is no built-in long press gesture!

[@hobbyturystaSEO]

Hey. I think about the gallery of let say 3 or 6 items ( thumbnails pictures ) with one big ( full screen ) preview. I thinking to move between thumbs and full preview DIV by a gesture. Is this possible in IONIC? Maybe somebody sees this kind of gallery in a mobile app? If yes please let me know in a comment. cheers

[@galaxies_dev]

I think this would also be possible with the Angular Drag&Drop CDK! But it might be possible with Ionic as well, but you would have to make some calculations when elements are dropped and perform some logic to exchange them then.

[@milothoxha2513]

Since I had to do that in a component, I didn't have to do a foreach of the elements, but what I did is that I added ViewChild instead of ViewChildren, like this: @ViewChild('shareElement', {read: ElementRef}) shareElement: ElementRef; with threshold commented, I was getting onStart event only after i swipe., i had to bring back threshold: 0 to make it work, like this: const gesture: Gesture = this.gestureCtrl.create({ el: this.shareElement.nativeElement, threshold: 0, gestureName: 'long-press', onStart: ev => { console.log(ev); this.longPressActive = true; }, onEnd: ev => { console.log(ev); this.longPressActive = false; } // onMove: ev => this.onMoveHandler(ev) }); gesture.enable(true); Thanks alot. I appriciate it.

[@galaxies_dev]

Thanks for sharing your addition Milot!

[@milothoxha2513]

@@galaxies_dev I also forgot that I had to add #shareElement on the html part. My pleasure, and thank you for your videos. Keep it up :)

[@yogeshravi4033]

is it possible to perform swipe up ? i can't able to perform swipe up gesture!

[@galaxies_dev]

Sure you could add a Swipe handler for the Y direction and then catch the onMove event!

[@yogeshravi4033]

@@galaxies_dev yeah I tried that by setting direction to Y instead of X yet when i swipe up still delta X value gets updated and card displaces from left to right!

[@paragbhide1695]

Thanks simon .. one more helpful video from your channel as always! If your channel wouldn't be here I would have probably shifted to React ***Also just to remind you, awaiting for your video on displaying already stored videos(from memory card as well as from Internal memory storage ) on mobile, probably in a folder structure like in a typical offline mobile video player it displays

[@galaxies_dev]

Glad they were helpful, and thanks for the idea!

[@milothoxha4430]

Hi Simon, Your're great, thank you for this amazing video tutorial :D Could you be able to do a Show/Hide Header for Ionic 4/5 on Scroll? I have been trying with directives and stuff but the result is so rubbish and on iOS is so flickering. Also, something about file compressing, file resize? that would be great too. Thank you :)

[@galaxies_dev]

Completely hide the header, or simply the new iOS behaviour with small headers?

[@milothoxha4430]

@@galaxies_dev Completely Hide the header, when you scroll down the header shows, when you scroll up the header hides. can you check this out please? I have posted a question on stackoverflow about this and to this day i am facing issues. stackoverflow.com/questions/60567023/ionic-4-hide-show-header-directive-animation-lags-while-scrolling Lets also say that you have an one header, and inside one header you have two toolbars, first top toolbar is the title, second bottom toolbar is the search-bar, the one you want to show/hide on scroll. This behavior should happen every time the user scrolls up/down, not like the iOS behavior that happens only when you reach the top of it. Its strange because it lags a lot, and it is not smooth at all which gives a bad UX to the user. We have managed to have a fix at it but still it still not that smooth. Thanks for replying :)

[@Prash3393]

always fan

[@giuliopretis]

This is a bit frustrating and not so clear when compared to native development long press functions.

[@galaxies_dev]

Yes it is indeed a bit different, I agree.

[@ishraq95]

Long waited features..

[@jonathanperry169]

Great video Simon. Thank you

[@bhavanigattikoppula2077]

How to get previous card data using right swipe?