Search code examples
iosangularionic-frameworkgestureionic4

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


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


Solution

  • 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.