How to disable swipe navigation?

Ionic Framework Ionic Vue
1

I’m using Ionic Vue on Cordova, and Android is allowing to change vue routes via swipe and I don’t want that. I added the following configurations, but they don’t help:

const app = createApp(App)
  .use(IonicVue, {
    // We don't want to allow swiping on Android to change route.
    // TODO: This is not working on Android, either forward or backward.
    swipeBackEnabled: false
  })

document.addEventListener('deviceready', () => {
  // disable back button on android
  // https://cordova.apache.org/docs/en/latest/cordova/events/events.html#backbutton
  document.addEventListener(
    'backbutton',
    e => {
      e.preventDefault()
      return false
    },
    false)
  }, false)
}

I also added the following to the MainActivity.java, but that also has no effect:

    @Override
    public void onStart() {
        super.onStart();
        OnBackPressedCallback callback = new OnBackPressedCallback(true) {
            @Override
            public void handleOnBackPressed() {
            }
        };
        getOnBackPressedDispatcher().addCallback(this, callback);
        WebView webView = (WebView) appView.getEngine().getView();
        webView.setOverScrollMode(WebView.OVER_SCROLL_NEVER);
    }
2

Setting hardwareBackButton: false fixes the issue. I’m not sure why this is not more widely mentioned as the solution.

1 Like