ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

feat: swipe to go back anywhere on view

Open aeharding opened this issue 2 years ago • 12 comments

Prerequisites

Describe the Feature Request

Swipe to go back with the gesture initiating anywhere on the screen

Describe the Use Case

Users have:

  1. accessibility issues
  2. bulkier phone cases
  3. gloves

that prevents, or make it difficult to, swipe from the left edge of the device.

Describe Preferred Solution

Full screen page swipe works by default, unless the swipe gesture starts on another swipeable element (like ion-item-sliding)

Describe Alternatives

I do not believe this is possible to implement without a library change.

Related Code

No response

Additional Information

Note I'm aware that this would require all ion-sliding-item to be disabled. I'm fine with this being done in the implementation/application code

Request from users of wefwef: https://lemmy.world/post/1028383

Related issue: https://github.com/aeharding/wefwef/issues/101

aeharding avatar Jul 04 '23 18:07 aeharding

Thanks for the report. Do you have a video of how you are expecting this behavior to work?

liamdebeasi avatar Jul 05 '23 13:07 liamdebeasi

Here you go! FWIW, this was a feature on Apollo for Reddit.

https://github.com/ionic-team/ionic-framework/assets/2166114/3ef11daa-7fbc-42d7-8180-4aace58b3065

aeharding avatar Jul 05 '23 14:07 aeharding

Thanks for the video. Is this a video of Apollo, or is it a video of your app? Ionic currently supports swiping from the edge of the screen for swipe to go back.

liamdebeasi avatar Jul 05 '23 18:07 liamdebeasi

Thanks for the video. Is this a video of Apollo, or is it a video of your app? Ionic currently supports swiping from the edge of the screen for swipe to go back.

This video is wefwef, not Apollo. Swiping from the left edge of screen works great; we'd like the option to allow swiping to go back where the event initiates anywhere on the screen, not just the left edge.

aeharding avatar Jul 05 '23 19:07 aeharding

Do you have examples of other apps that implement this? Apollo has shut down, so I'm not able to see how this behavior would work.

liamdebeasi avatar Jul 05 '23 19:07 liamdebeasi

https://github.com/ionic-team/ionic-framework/assets/25400300/76f373c4-e676-4350-9699-874d8801a864

Like this (example of the Reddit app, which partially has it). Apollo solved it by disabling the other gestures. In Apollo you could also do an additional swipe to the subreddit list, which would be intuitive here as well.

NoWayBehind avatar Jul 05 '23 20:07 NoWayBehind

Thanks for the video. It looks like you can also do this with the Slack mobile app. It sounds like this feature request is more about being able to swipe anywhere on the view to go back than being able to swipe anywhere on the screen. For example, you should not be able to swipe back on the tab bar because the tab bar is not part of the child view. However, with this feature request users would not be limited to swiping only on the starting edge of the view. I think this would be a good feature to have.

liamdebeasi avatar Jul 05 '23 21:07 liamdebeasi

On a related note: How did you suppress the native iOS page transition on your app when using it as a PWA? Typically when you swipe on a child page Ionic's page transition as well as the native iOS page transition activates. However, in your app only the Ionic one activates.

liamdebeasi avatar Jul 05 '23 21:07 liamdebeasi

On a related note: How did you suppress the native iOS page transition on your app when using it as a PWA? Typically when you swipe on a child page Ionic's page transition as well as the native iOS page transition activates. However, in your app only the Ionic one activates.

Oh, that's a fun hack: I detect if the webapp is installed (and is iOS) and then use the memory router :)

https://github.com/aeharding/wefwef/blob/main/src/Router.tsx

aeharding avatar Jul 05 '23 22:07 aeharding

Thanks for the video. It looks like you can also do this with the Slack mobile app. It sounds like this feature request is more about being able to swipe anywhere on the view to go back than being able to swipe anywhere on the screen. For example, you should not be able to swipe back on the tab bar because the tab bar is not part of the child view. However, with this feature request users would not be limited to swiping only on the starting edge of the view. I think this would be a good feature to have.

That sounds great! However I feel like I should mention that in Apollo, you can always swipe anywhere on the tab bar to initiate a swipe gesture to go back a page. So even if you have full page swipe turned off for the app, it's a nice shortcut. 🙂

(Likely out of scope for this feature request, and totally a non-standard thing, but might be worth consideration.)

aeharding avatar Jul 05 '23 22:07 aeharding

On a related note: How did you suppress the native iOS page transition on your app when using it as a PWA? Typically when you swipe on a child page Ionic's page transition as well as the native iOS page transition activates. However, in your app only the Ionic one activates.

Oh, that's a fun hack: I detect if the webapp is installed (and is iOS) and then use the memory router :)

https://github.com/aeharding/wefwef/blob/main/src/Router.tsx

Oh clever! I have been trying to get a feature added to the Web Manifest that would allow devs to disable the native gestures so they can use URL-based routing: https://github.com/w3c/manifest/issues/1041. I think having a use case like yours would go a long way in making the case for this feature.

liamdebeasi avatar Jul 06 '23 12:07 liamdebeasi

This is being added in iOS 26. Swipe anywhere now works anywhere, UNLESS you are swiping over an otherwise swipeable element (like ion-item-sliding), in which case it will still be from the edge of the screen.

https://forums.macrumors.com/threads/ios-26-tweaks-back-gesture-to-make-navigation-easier-on-bigger-iphones.2458596/

aeharding avatar Jun 10 '25 15:06 aeharding