How to disable swipe-to-go-back gesture on one page only? (Ionic v5 React)

Ionic Framework Ionic React
1

Does anyone know if there’s a way to disable the iOS swipe-to-go-back gesture on just one page in Ionic React? Or, how to do it programmatically?

I know you can disable it globally using the method in the docs here (i.e. setupConfig), but that method affects all pages and seems to only be runnable once as the app starts up.

Also, I know this is easy to do in an Angular app—just inject IonRouterOutlet and set swipeGesture to true/false when entering/leaving the page (see SO answer / forum answer). I need an equivalent solution for React, if it exists. There doesn’t seem to be any documentation on it at the moment.

Thanks in advance.

1 Like
2

One option would be to set routerDirection="root" when you link to that page. That’s appropriate if you don’t want the user to be able to go back, i.e. the new page is now the top of the navigation stack.

3

That doesn’t fit my use case. I want to keep the “push” behavior for the nav stack when visiting this page. I need only to disable the gesture when this particular page is active. No changes to the nav stack behavior are intended.

4

Use createGesture to override the default swipe back gesture.

use gesturePriority > 40 because of the ionic source code

let gesture = createGesture({
        el: document.getElementById('myIonPage'),
        threshold: 0,
        gestureName: 'my-gesture',
        gesturePriority: 40.5, // priority of swipe to go back is 40 
        onMove: ev => console.log(ev)
      });

gesture.enable(true);

Use createAnimation ,if you want to customize the animation as well.

4 Likes
5

It’s not working well on my ionic react app. Is there a working example where I can refer to? Thanks.