How to avoid swiping the navbar with back swipe navigation

Capacitor
1

I want to implement swiping navigation in my app so user will be able to go back / forward in a convenient way.

For that matter I’ve used default webview swiping via [Capacitorjs | Angular] Back Swipe Support for iOS and Android

The problem I’m facing is: now my navigation (on the bottom) swipes along with the page content (as it is a part of the page).

I want the navigation to stay in place and only content could be swiped back / forward.

I can think about possible solution to this - having 2 different WKWebViews (separate views for <Navigation/> and for <Content/>) that communicate with each other would solve this, but is it possible with capacitor? Is this something to look in Subclassing CAPBridgeViewController | Capacitor Documentation?

Maybe any other solutions to achieve fixed navigation along with swipable content?

ezgif.com-video-to-gif

2

There is a Ionic Config prop that can be set in the app.module> This would disable swiping back in the whole app. I personally disabled it in all the apps I create.

@NgModule({
  imports: [
    ...
    IonicModule.forRoot({
      swipeBackEnabled: false
    })
  ],

More info here: Config | Ionic Documentation

3

but I wanted to enable it - I have UX requirement for this behavior, the only problem is my <Navigation/> is also swipable along with <Content /> so I want to have control here on what is swipable and what it not

4

hmm maybe some css would be best. Maybe add sides padding to the navbar?

5

unfortunately css doesn’t seem to help here as <Navigation/> is part of the page - regardless of the styles it will get swiped along with the page

6

I dont’t think swipe would be working in android ? @lazydays