Disable browser's refresh on swipe down in mobile phones

[Ashish50514561]

I have used e.Event.preventDefault and stop propagation inside my swipe handler still when i swipe down it refreshes the app along with executing the handler.

[isaachinman]

This issue has been open for a year. Has anyone figured out a solution? It seems calling preventDefault and stopPropagation on the SwipeEventData does not behave as expected.

[jmorettonf]

The browser refresh can be avoided by using the touch-action attribute set to none in the container which is swipeable. There is an example in the docs here: https://commerce.nearform.com/open-source/react-swipeable/docs/examples/feature-test-console

If you open this on your phone and mark this checkbox here:

You can see that the browser refresh no longer happens when swiping down in the swipeable area.

Here is a code example of how you can apply this to your project:
https://github.com/FormidableLabs/react-swipeable/blob/main/examples/app/FeatureTestConsole/index.tsx

Check the swipeableStyle const. This is passed a prop which is applied to the inner div in the hook. This should work for mobile browsers.