How to disable swipe back gesture globally in ionic 4 angular project

Markus Kösel picture Markus Kösel · Dec 10, 2018 · Viewed 9.6k times · Source

Already tried to achieve this with:

<ion-router-outlet swipeGesture="false" animated="false"></ion-router-outlet>

and in app.module:

IonicModule.forRoot({
    swipeBackEnabled: false
}),

config.xml:

<preference name="AllowBackForwardNavigationGestures" value="false" />

..but horizontal swipe gestures still trigger navigation to other pages :-(

Possible ways i can think of and tried partially but unsuccessfully are:

  1. use deprecated ionic navController somehow?
  2. use hammerJS?
  3. use undocumented GestureController (https://github.com/ionic-team/ionic/tree/a77ee2a6f88e8defb1763b71e77410264fafac70/core/src/utils/gesture)

If someone can point in the right direction or provide an example how to disable swiping, mainly for iOS, i would be very glad, thx a lot

Answer

Andreas Gassmann picture Andreas Gassmann · Dec 20, 2018

I solved it by adding [swipeGesture]="false" to the ion-router-outlet as described here: https://github.com/ionic-team/ionic/issues/16441

At first, I made the mistake of adding it to all ion-router-outlets in my tabs.html file. That didn't work. Instead, you only have to add it to the ion-router-outlet in the app.component.html file. That did the trick for me.

app.component.html

<ion-app>
  <ion-router-outlet [swipeGesture]="false"></ion-router-outlet>
</ion-app>

I'm using ionic version 4.0.0-beta.17.