feat: back gesture with full screen swipe #705

intergalacticspacehighway · 2023-03-24T09:52:32Z

Previous PR - #665

Summary

React Native Screen has a prop named fullScreenGestureEnabled that enables back gesture on full-screen swipe. This PR makes that prop work nicely with pager view by disabling it's scroll when index is 0 and user is swiping back, so the RN Screen gesture can take over.
Resolves - Release gesture (activeOffset?) when on first tab to enable navigator swipe/pop PedroBern/react-native-collapsible-tab-view#248
Also updated react navigation and screens dependency because this prop is only available in the newer version 😅

Test Plan

Add fullScreenGestureEnabled on react navigation's native stack and try to swipe when the first page is reached in pager view.
Test fabricexample too with the same changes.

Screen.Recording.2022-12-03.at.4.51.52.PM.mov

Test with RTL enabled

I18nManager.forceRTL(true);

Screen.Recording.2022-12-03.at.4.48.26.PM.mov

What's required for testing (prerequisites)?

Run yarn install and pod install in example to upgrade the react navigation dependencies.
Add fullScreenGestureEnabled in react navigation screen options

What are the steps to reproduce (after prerequisites)?

Open any pager view example and swipe to go back with fullScreenGestureEnabled should work on the first page.

Compatibility

OS	Implemented
iOS	✅
Android	❌

Checklist

I have tested this on a device and a simulator
I added the documentation in README.md
I updated the typed files (TS and Flow)

intergalacticspacehighway · 2023-03-24T09:55:14Z

example/package.json

-    "@react-navigation/native": "^5.8.10",
-    "@react-navigation/native-stack": "5.0.4",
-    "@react-navigation/stack": "^5.12.8",
+    "@react-navigation/native": "~6.1.6",


Upgrade is required as fullScreenGestureEnabled requires new RNScreen version. Looks like it shouldn't break anything. https://reactnavigation.org/docs/upgrading-from-5.x/

intergalacticspacehighway · 2023-03-24T09:59:13Z

ios/Fabric/RNCPagerViewComponentView.mm

+- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
+
+    // Recognize simultaneously only if the other gesture is RN Screen's pan gesture (one that is used to perform fullScreenGestureEnabled)
+    if (gestureRecognizer == self.panGestureRecognizer && [NSStringFromClass([otherGestureRecognizer class]) isEqual: @"RNSPanGestureRecognizer"]) {


RNSPanGestureRecognizer is the name of the pan gesture used by react-native-screens. This check is added to minimize the side effect of this change, as discussed here

andreialecu · 2023-03-24T10:04:13Z

Awesome, thanks for this!

One quick question though - does this only apply to the first page?

If the user drags from the very left edge while on pane 2 of the pager, will he be allowed to go back in React Navigation on iOS?

CleanShot.2023-03-24.at.12.02.35.mp4

Here's what I mean, above. Right now we're doing this via a negative hitSlop as per this comment: PedroBern/react-native-collapsible-tab-view#248 (comment)

However it doesn't seem to always work, and has the side effect of nothing being able to be clicked within that edge - which is not necessarily a real issue, but seems like a hack nonetheless.

intergalacticspacehighway · 2023-03-24T10:34:52Z

from the very left edge while on pane 2 of the pager

Yes, it should work. It at least works in the example app. It needs native stack navigator though.

Screen.Recording.2023-03-24.at.4.02.23.PM.mov

btw I noticed the scroll view based rewrite on next branch. So would need a different approach to make it work in that version. I can look when I get some time 😅

intergalacticspacehighway · 2023-03-24T10:47:01Z

@andreialecu are you using native stack? if yes, I can look into it if you can share a minimal repro. JS based Stack navigator doesn't work with the edge back gesture and needs the hitSlop workaround like you mentioned.

andreialecu · 2023-03-24T11:24:49Z

Ah, not on the native stack yet because we still rely on https://github.com/IjzerenHein/react-native-shared-element which doesn't work with the native stack.

Once the shared element transitions in Reanimated mature, we should be able to move to the native stack finally. They're currently still incomplete and buggy.

Thanks for clarifying!

troZee · 2023-03-24T11:46:58Z

@intergalacticspacehighway @andreialecu
Thank you for sharing your thoughts here. I have tested this PR and it works 🎉

btw I noticed the scroll view based rewrite on next branch.

will create another ticket for that to have visibility on it.

troZee · 2023-03-24T12:04:45Z

https://github.com/callstack/react-native-pager-view/releases/tag/v6.2.0

ouabing · 2023-03-25T15:48:41Z

I used to encounter an issue after applying this patch in the previous PR with react-native-screens enabled.

After I navigate from the screen with PagerView to another screen and go back, I cannot use back gesture anymore. self.panGestureRecognizer is changed and shouldRecognizeSimultaneouslyWithGestureRecognizer seems to not correctly recognize the latest self.panGestureRecognizer.

My observation is didMoveToWindow get called everytime I reenter the screen with PagerView if react-native-screens is enabled, and this line always assigns a new UIPanGestureRecognizer without remove the previous one.

My personal patch based on this PR is like below:

if (self.panGestureRecognizer) {
    [self removeGestureRecognizer:self.panGestureRecognizer];
}
UIPanGestureRecognizer* panGestureRecognizer = [UIPanGestureRecognizer new];
self.panGestureRecognizer = panGestureRecognizer;
panGestureRecognizer.delegate = self;
[self addGestureRecognizer: panGestureRecognizer];

Because I'm not sure if it's a common issue, so I just post here if someone need this.

intergalacticspacehighway · 2023-03-25T15:55:08Z

@ouabing i moved the gesture initialiser from didMoveToWindow to initWithEventDispatcher in this PR. So, it should only get called once during the View creation. Can you try the version 6.2.0 and let us know if the issue persists? Thanks!

ouabing · 2023-03-25T16:00:42Z

@intergalacticspacehighway oh my apology for not checking the PR carefully. I'll try now, thanks for the work!

ouabing · 2023-03-25T16:54:20Z

Hi I just tested this PR and now I think my problem should be a new issue. I used to use this PR to solve another issue with react-native-tab-view(which uses react-native-pager-view), when a tab view is inside a pushed screen(not RNScreen's native stack but with RNScreen enabled in react-navigation), the back gesture won't work.

I noticed in the new PR the otherGestureRecognizer check is limited to the one RNScreen's native stack use, so the PR is not working any more in my case.

I will try to reproduce my case and create another issue maybe, thank you anyway!

boboxiaodd · 2023-04-03T07:17:38Z

@troZee i use react-native-pager-view for video show like TikTok
upgrade to 6.2.0 , gestureEnabled can't work for iOS ,i has to downgrade to 6.1.4

intergalacticspacehighway · 2023-04-03T09:14:33Z

@boboxiaodd what do you mean gestureEnabled can't work for iOS? Can you explain in more detail or with a video?

There is no prop named gestureEnabled in the library. or do you mean scrollEnabled?

boboxiaodd · 2023-04-06T09:26:54Z

@intergalacticspacehighway
gestureEnabled is reactnavigation screen prop

tiagotwistag · 2023-04-11T08:41:32Z

Hi I just tested this PR and now I think my problem should be a new issue. I used to use this PR to solve another issue with react-native-tab-view(which uses react-native-pager-view), when a tab view is inside a pushed screen(not RNScreen's native stack but with RNScreen enabled in react-navigation), the back gesture won't work.

I noticed in the new PR the otherGestureRecognizer check is limited to the one RNScreen's native stack use, so the PR is not working any more in my case.

I will try to reproduce my case and create another issue maybe, thank you anyway!

I believe I'm also facing the same issue, Is there any plan to support @react-navigation/stack?

This reverts commit 769a3a2.

troZee · 2023-09-25T13:02:39Z

Since the fact, this feat does not work, I am reverting it here: #771

…mplementation (#783) * wip: unsuspicious changes * wip: unsuspicious changes v2 * FABRIC NEW IMPL -> OLD IMPL * wip: bring back useLegacy on the RN side * wip: bring back duplicate types to fix codegen issues * wip: remove #705 related code for now * wip: old/new impl division first draft * wip: old/new impl division continued * wip: old/new impl v3 * wip: add a `LEGACY_` prefix to all legacy implementation-related symbols * wip: fix styles for new implementation on Fabric * wip: move old/new impl into separate folders * wip: fix old impl fabric symbol names * wip: xcode changes * wip: clean up & unify the naming convention * wip: fix linter issues * wip: fix styles for new implementation on Paper * wip: make Fabric example run on another port by default to make it possible to run both examples in parallel * wip: implement an abstraction over native commands invocations to reduce branching * refactor: remove the unnecessary value for boolean props * fix: bump react-native-safe-area-context to a Fabric-enabled version * feat: bring back & adjust the `bootstrap-fabric` script * feat: adjust the home screen title depending on the used architecture * chore: update example/Podfile.lock * chore: update an Xcode project file after building * ci: make next branch events trigger ios/android build workflows * chore: remove commented-out code related to #705 for now * chore: add legacy implementation explanation comment * wip: Android fixes * fix: unnecessary comma in MainActivity.java * feat: readme makeover * chore: bump react-native-screens & react-native-gesture-handler in example * refactor(android): extract module name to shared variable, add comment for context * chore: remove unnecessary yarn.lock deps * chore(ios): bring back removed build flags * chore(ios): remove unnecessary concurrentRootEnabled method According to React Native Upgrade Helper, this method is to be removed when updating to RN 0.72: https://react-native-community.github.io/upgrade-helper/?from=0.71.14&to=0.72.0#RnDiffApp-ios-RnDiffApp-AppDelegate.mm * fix(android): adjust incorrect param type on Fabric * chore: remove unnecessary tsconfig.json comment * chore(ios): bring back (currently unused) code related to #712 and #705

* feat(iOS): change Fabric implementation to UIScrollView (#672) * feat(iOS): change Fabric implementation to UIScrollView * fix: fix offset values in vertical orientation * feat: add initialPage props support * feat: add RTL language support * feat: add pageMargin prop support * fix: fix typescript error * feat: remove React.cloneElement * feat(ios): add getPageOffset method * fix: fix styles in old example * fix: behavior on page remove * chore: add GH actions (#680) Co-authored-by: Piotr Trocki <[email protected]> * feat(iOS): rewrite old arch to use UIScrollView (#681) * feat: rewrite old arch to use UIScrollView * feat: update example styles * fix: sending event on scrollViewDidEndDecelerating * feat: properly calculate width using orientation * fix: change way of disabing scroll * feat: rename to RNCPagerView * fix: removing last page * fix: remove unused properties, set animated * chore: update release script * Release 7.0.0-rc.0 * wip * wip * fabric example * nit: comment * make init consistent * fix: multiple updates of frame and contentSize * feat: add button to quickly switch layout direction * sync with master (#756) Co-authored-by: Piotr Trocki <[email protected]> * chore: upgrade RN (paper example) * chore: upgrade rn & fix issues (fabric example) * chore: bump versions in package.json * chore: fix eslint issue * chore: exclude example from tsc * feat(next): remove fabric example * chore: update README * fix broken overdrag on notch (#787) Co-authored-by: Kuba Juszczyk <[email protected]> * feat(iOS): Add a `useLegacy` flag to switch between the old/new iOS implementation (#783) * wip: unsuspicious changes * wip: unsuspicious changes v2 * FABRIC NEW IMPL -> OLD IMPL * wip: bring back useLegacy on the RN side * wip: bring back duplicate types to fix codegen issues * wip: remove #705 related code for now * wip: old/new impl division first draft * wip: old/new impl division continued * wip: old/new impl v3 * wip: add a `LEGACY_` prefix to all legacy implementation-related symbols * wip: fix styles for new implementation on Fabric * wip: move old/new impl into separate folders * wip: fix old impl fabric symbol names * wip: xcode changes * wip: clean up & unify the naming convention * wip: fix linter issues * wip: fix styles for new implementation on Paper * wip: make Fabric example run on another port by default to make it possible to run both examples in parallel * wip: implement an abstraction over native commands invocations to reduce branching * refactor: remove the unnecessary value for boolean props * fix: bump react-native-safe-area-context to a Fabric-enabled version * feat: bring back & adjust the `bootstrap-fabric` script * feat: adjust the home screen title depending on the used architecture * chore: update example/Podfile.lock * chore: update an Xcode project file after building * ci: make next branch events trigger ios/android build workflows * chore: remove commented-out code related to #705 for now * chore: add legacy implementation explanation comment * wip: Android fixes * fix: unnecessary comma in MainActivity.java * feat: readme makeover * chore: bump react-native-screens & react-native-gesture-handler in example * refactor(android): extract module name to shared variable, add comment for context * chore: remove unnecessary yarn.lock deps * chore(ios): bring back removed build flags * chore(ios): remove unnecessary concurrentRootEnabled method According to React Native Upgrade Helper, this method is to be removed when updating to RN 0.72: https://react-native-community.github.io/upgrade-helper/?from=0.71.14&to=0.72.0#RnDiffApp-ios-RnDiffApp-AppDelegate.mm * fix(android): adjust incorrect param type on Fabric * chore: remove unnecessary tsconfig.json comment * chore(ios): bring back (currently unused) code related to #712 and #705 * Release 7.0.0-rc.1 * fix(ios): fix freezing when navigating to same index (#804) * Release 7.0.0-rc.2 * fix iOS issue * Change Legacy basic example into the next basic example * revert documentatation --------- Co-authored-by: Kacper Rożniata <[email protected]> Co-authored-by: Piotr Trocki <[email protected]> Co-authored-by: Oskar Kwaśniewski <[email protected]> Co-authored-by: Nishan <[email protected]> Co-authored-by: Kuba Juszczyk <[email protected]> Co-authored-by: Kuba Juszczyk <[email protected]> Co-authored-by: Igor Bejnarowicz <[email protected]>

This reverts commit 769a3a2.

intergalacticspacehighway added 3 commits March 23, 2023 22:45

wip

7a8f540

wip

51973f7

revert versions

879905d

intergalacticspacehighway mentioned this pull request Mar 24, 2023

feat: back gesture with full screen swipe #665

Closed

3 tasks

intergalacticspacehighway commented Mar 24, 2023

View reviewed changes

troZee merged commit 769a3a2 into callstack:master Mar 24, 2023

intergalacticspacehighway deleted the fix/full-swipe-back-gesture branch March 24, 2023 11:48

troZee mentioned this pull request Mar 24, 2023

[iOS] back gesture in 7.0.0 #709

Closed

td-tomasz added a commit to Transmission-Dynamics/react-native-pager-view that referenced this pull request Sep 13, 2023

Revert "feat(ios): back gesture with full screen swipe (callstack#705)"

0e456d6

This reverts commit 769a3a2.

troZee mentioned this pull request Sep 25, 2023

Revert "feat(ios): back gesture with full screen swipe (#705)" #771

Draft

3 tasks

igorbej added a commit that referenced this pull request Oct 24, 2023

wip: remove #705 related code for now

55496e1

igorbej added a commit that referenced this pull request Oct 24, 2023

wip: remove #705 related code for now

8369060

igorbej added a commit that referenced this pull request Oct 30, 2023

chore: remove commented-out code related to #705 for now

0a3db4f

igorbej mentioned this pull request Nov 30, 2023

feat(iOS): Add a useLegacy flag to switch between the old/new iOS implementation #783

Merged

3 tasks

igorbej added a commit that referenced this pull request Dec 14, 2023

chore(ios): bring back (currently unused) code related to #712 and #705

0212f97

james-ovens-eurostar mentioned this pull request Jul 3, 2024

Swiping left to right does not work on iOS #686

Open

td-miloszdubiel pushed a commit to Transmission-Dynamics/react-native-pager-view that referenced this pull request Jan 29, 2025

Revert "feat(ios): back gesture with full screen swipe (callstack#705)"

9df6cd6

This reverts commit 769a3a2.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: back gesture with full screen swipe #705

feat: back gesture with full screen swipe #705

intergalacticspacehighway commented Mar 24, 2023

intergalacticspacehighway Mar 24, 2023

intergalacticspacehighway Mar 24, 2023 •

edited

Loading

andreialecu commented Mar 24, 2023 •

edited

Loading

intergalacticspacehighway commented Mar 24, 2023 •

edited

Loading

intergalacticspacehighway commented Mar 24, 2023 •

edited

Loading

andreialecu commented Mar 24, 2023

troZee commented Mar 24, 2023

troZee commented Mar 24, 2023

ouabing commented Mar 25, 2023 •

edited

Loading

intergalacticspacehighway commented Mar 25, 2023

ouabing commented Mar 25, 2023

ouabing commented Mar 25, 2023 •

edited

Loading

boboxiaodd commented Apr 3, 2023

intergalacticspacehighway commented Apr 3, 2023 •

edited

Loading

boboxiaodd commented Apr 6, 2023

tiagotwistag commented Apr 11, 2023

troZee commented Sep 25, 2023

feat: back gesture with full screen swipe #705

feat: back gesture with full screen swipe #705

Conversation

intergalacticspacehighway commented Mar 24, 2023

Summary

Test Plan

Test with RTL enabled

What's required for testing (prerequisites)?

What are the steps to reproduce (after prerequisites)?

Compatibility

Checklist

intergalacticspacehighway Mar 24, 2023

Choose a reason for hiding this comment

intergalacticspacehighway Mar 24, 2023 • edited Loading

Choose a reason for hiding this comment

andreialecu commented Mar 24, 2023 • edited Loading

intergalacticspacehighway commented Mar 24, 2023 • edited Loading

intergalacticspacehighway commented Mar 24, 2023 • edited Loading

andreialecu commented Mar 24, 2023

troZee commented Mar 24, 2023

troZee commented Mar 24, 2023

ouabing commented Mar 25, 2023 • edited Loading

intergalacticspacehighway commented Mar 25, 2023

ouabing commented Mar 25, 2023

ouabing commented Mar 25, 2023 • edited Loading

boboxiaodd commented Apr 3, 2023

intergalacticspacehighway commented Apr 3, 2023 • edited Loading

boboxiaodd commented Apr 6, 2023

tiagotwistag commented Apr 11, 2023

troZee commented Sep 25, 2023

intergalacticspacehighway Mar 24, 2023 •

edited

Loading

andreialecu commented Mar 24, 2023 •

edited

Loading

intergalacticspacehighway commented Mar 24, 2023 •

edited

Loading

intergalacticspacehighway commented Mar 24, 2023 •

edited

Loading

ouabing commented Mar 25, 2023 •

edited

Loading

ouabing commented Mar 25, 2023 •

edited

Loading

intergalacticspacehighway commented Apr 3, 2023 •

edited

Loading