bug: react swipe to go back does not implement gesture properly

[BerkeAras]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:
iOS Swipe back not working properly on React

Expected behavior:
App should go back after swiping, not while swiping.

Steps to reproduce:
Sample App: https://azbs-app-dev.azurewebsites.net/schedule

[liamdebeasi]

Thanks for the issue. Looks like this is the culprit:

ionic-framework/packages/react-router/src/ReactRouter/StackManager.tsx

Line 135 in 74af3cb

this.context.goBack();

. When the gesture starts, Ionic React just navigates back instead of using the onMove callback.

[BerkeAras]

@liamdebeasi Is there already a pull request?

[liamdebeasi]

There is no PR yet. Are you interested in working on this?

[BerkeAras]

@liamdebeasi I could try, I do not work with ts often ^^

[liamdebeasi]

Thanks! We have a guide on contributing here: https://github.com/ionic-team/ionic-framework/blob/master/.github/CONTRIBUTING.md#creating-a-pull-request.

This fix needs to be implemented in the onStart and onEnd handlers for routerOutlet:

ionic-framework/packages/react-router/src/ReactRouter/StackManager.tsx

Line 137 in 74af3cb

routerOutlet.swipeHandler = {

The easiest thing may be to adapt the solution we have for Ionic Vue: https://github.com/ionic-team/ionic-framework/blob/master/packages/vue/src/components/IonRouterOutlet.ts#L143

[ionitron-bot]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

[BerkeAras]

Thanks! We have a guide on contributing here: https://github.com/ionic-team/ionic-framework/blob/master/.github/CONTRIBUTING.md#creating-a-pull-request.

This fix needs to be implemented in the onStart and onEnd handlers for routerOutlet:

ionic-framework/packages/react-router/src/ReactRouter/StackManager.tsx

Line 137 in 74af3cb

routerOutlet.swipeHandler = {

The easiest thing may be to adapt the solution we have for Ionic Vue: https://github.com/ionic-team/ionic-framework/blob/master/packages/vue/src/components/IonRouterOutlet.ts#L143

Thank you @liamdebeasi.

I will start contributing as soon as possible :)

[BerkeAras]

@liamdebeasi I could not find anything about this in the contributing guideline: How can I preview my changes for react? Running npm start just runs a preview for ionic core.

[liamdebeasi]

Good question. We have a test Ionic React application that you can use to preview your changes or write Cypress tests against: https://github.com/ionic-team/ionic-framework/tree/master/packages/react/test/test-app.

To copy over your changes, you should first run npm run build in the packages/react and packages/react-router directory. Then, in the packages/react/test-app directory, run npm run sync to copy over the built changes. After that, you can use npm run start to start a live reload server for the test app.

edit: use packages/react-router/test-app instead of packages/react/test-app