CODEWITHSUNDEEP
ionic-frameworkionic5
Younes Yaas
Younes Yaas

Reputation: 498

Ionic 5 - SwipeToClose is impossible

My problem is quite simple : I try to implement a component in modal, but when I try to add SwipeToClose, it's not working (The modal stay static even if I try to swipe down) ...

I'm really confused, but I've create a Stackblitz to show you my issue in detail, maybe I miss something important ... : https://stackblitz.com/edit/ionic-angular-v5-u4wmun

My component : 

import { Component, Injectable } from '@angular/core';
import { NavController, ModalController } from '@ionic/angular';
import { ModalComponent } from './modal/modal.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  myModal:any;

  constructor(
    public modalController: ModalController
  ) {
  }

  async presentModal() {
    this.myModal = await this.modalController.create({
      component: ModalComponent,
      swipeToClose: true,
      backdropDismiss: true
    });
    return await this.myModal.present();
  }

}

Thanks to your time !

PS : I try to use it in iOS only, I've already try on my iOS device and it's doesn't work too ...

Upvotes: 0

Views: 4033

Answers (2)

Volkan Talayhan
Volkan Talayhan

Reputation: 36

SwipeToClose Gesture only works on IOS mode and could be applied on card modals and will be deprecated by next release. If you apply following method to IonContent element or first element in body, it detects swipeDown gesture and kinda solves that issue and works with all modes.

constructor(public gestureCtrl: GestureController) { }

swipeDownToCloseModal = (elm: HTMLElement)=>{
  const swipeGesture: Gesture = this.gestureCtrl.create({
    el:elm,
    threshold:1,
    maxAngle:95,
    gestureName:'swipeGesture',
    onEnd:e=>{
      if(e.velocityY>0.15 && e.deltaY>100 && elm.getBoundingClientRect().y===0){
        this.modal.dismiss(); //change
      }
    }
  });
  swipeGesture.enable(true);
};

Upvotes: 1

Yaswanth Reddy Ubbara
Yaswanth Reddy Ubbara

Reputation: 31

swipe to close is only available for modals in ios mode(currently ionic v5). So, specify the mode of your modal to be ios

   this.myModal = await this.modalController.create({
  component: ModalComponent,
  swipeToClose: true,
  mode: 'ios',
  backdropDismiss: true
});

Upvotes: 3

Related Questions