Ionic-framework: bug: swipe to go back does not work on Ionic React

[Squid7331]

Bug Report

Ionic version : 5.0.1 (latest)

Variant used : React

Current behavior

On Ionic React, the transition of the swipe gesture to go back on the previous stacked screen is not working properly. When you route forward and then go back with the swipe gesture, I noticed that the swipe back gesture cause the animation to trigger twice.

The back button works fine, the issue is just regarding the swipe to go back gesture.

I've only been able to reproduce this on a physical iOS device (iPhone 11, iOS 13) because it seems working well via the iOS simulator.

Steps to reproduce

1. Open the app on your iOS device from http://beerodex-squid7331.firebaseapp.com
   
2. Click the "Goto page 2" button
   
3. Use the swipe back gesture to go back to the previous page
   

Video

This is a video of the occurrence :

https://streamable.com/32sm7

Related code

This is a link to my GitHub project :

https://github.com/Squid7331/react-ionic-swipegesture-issue

Other info

Same issue as this topic on Ionic Framework forum :

https://forum.ionicframework.com/t/swipe-back-gesture-on-ios-pwa-with-react-mixing-up/180024

Ionic info

Ionic:

   Ionic CLI       : 6.3.0
   Ionic Framework : @ionic/react 5.0.7

Capacitor:

   Capacitor CLI   : 1.5.2
   @capacitor/core : 1.5.2

Utility:

   cordova-res : 0.11.0
   native-run  : 0.3.0

System:

   NodeJS : v12.16.0
   npm    : 6.13.4

[lscardinali]

This happened to me too as i posted on the forum in December
https://forum.ionicframework.com/t/swipe-back-gesture-on-ios-pwa-with-react-mixing-up/180024/2
And got no answer.

I've tried to disable the swipe back gesture by adding to App.tsx
setupConfig({ swipeBackEnabled: false, });

And it does disable the Ionic's swipe back gesture, but the native one remains, which works, but when the swipe is completed and we're back on the first screen, the "pop" animation kicks in, resulting in a double animation again.
It can be seen here: https://streamable.com/ygjsy

This happens because _apparently_ we cannot disable the Safari's default swipe back gesture.
While there's a history, the swipe back will work.

I'll be looking into how the Angular counterpart works, as it works as it should and apparently still uses the history

[ccssmnn]

I guess the problem is that the first animation we see is the one provided by iOS Safari when using this gesture. You can test this on any site. After Safari successfully returns to the previous site (Safari animation finishes) the animation triggered by IonRouterOutlet starts. Thus we see the animation twice, since they are pretty similar.

The quick fix is to disable animations in IonRouterOutlet. Since this would remove the animation on all devices you can set that boolean dependent on the platform where your app is running with the isPlatform method from @ionic/react documented here.

[lucnat]

Any update on this? @ccssmnn with your solution you have no animations at all if you press the "go back" button..which is suboptimal.

[avilao]

I also have the same issue. Any new solutions?

[uncvrd]

Also confirming this issue on a PWA as well. I've disabled swipeBackEnabled for non capacitor devices in hopes this would prevent a duplicate animation with no luck unfortunately.

[lucnat]

As of now, disabling swipe back gesture as in https://ionicframework.com/docs/react/config works. Enabling it is still buggy, e.g. when used with a sidemenu. Also, it is not a smooth swipe back gesture, but snaps back once triggered.
Would love to see some improvements on that.