feat: back gesture with full screen swipe #665
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -1295,45 +1295,56 @@ | |
| resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa" | ||
| integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ== | ||
|
|
||
| "@react-navigation/core@^6.4.3": | ||
| version "6.4.3" | ||
| resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.4.3.tgz#5609bab95e3080d190eff46a64e52cc06eb0c4cf" | ||
| integrity sha512-+HGHeEq7GK029Jy2jFkV2uQYc6a6AurjjUAVFlSz5tsNo4L5E3ZCzo7sk5+lcvt0Agdedf5Q+wTiWjT7IrixgA== | ||
| dependencies: | ||
| "@react-navigation/routers" "^6.1.5" | ||
| escape-string-regexp "^4.0.0" | ||
| nanoid "^3.1.23" | ||
| query-string "^7.0.0" | ||
| react-is "^16.13.0" | ||
| use-latest-callback "^0.1.5" | ||
|
|
||
| "@react-navigation/elements@^1.3.9": | ||
| version "1.3.9" | ||
| resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.9.tgz#33e26d7ad655b012e024ef0a005a3f66201287f8" | ||
| integrity sha512-V9aIZN19ufaKWlXT4UcM545tDiEt9DIQS+74pDgbnzoQcDypn0CvSqWopFhPACMdJatgmlZUuOrrMfTeNrBWgA== | ||
|
|
||
| "@react-navigation/native-stack@^6.9.4": | ||
| version "6.9.4" | ||
| resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-6.9.4.tgz#d9cc26ad97afcee1c0e3fb092ae4c60f848b1572" | ||
| integrity sha512-R40G2Zfo748hE4+we/TUAEClw53l0QdFDJ0q/9VS1moxgI4zUopdBxN5SmF32OMFfkedMRAT9J+aVbwgmdn7pA== | ||
| dependencies: | ||
| "@react-navigation/elements" "^1.3.9" | ||
| warn-once "^0.1.0" | ||
|
|
||
| "@react-navigation/native@^6.0.16": | ||
| version "6.0.16" | ||
| resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.0.16.tgz#a37df62da9db912c91c53e2cdeadb954865a6a9b" | ||
| integrity sha512-YVmzypkDppV/vAG+66KTJ2RFtPjhDTLLjgk8TNTCHG3pahq1q13zbnEPjqB42bU4kgL5SG17O4saErt1DJaWQg== | ||
| dependencies: | ||
| "@react-navigation/core" "^6.4.3" | ||
| escape-string-regexp "^4.0.0" | ||
| fast-deep-equal "^3.1.3" | ||
| nanoid "^3.1.23" | ||
|
|
||
| "@react-navigation/routers@^6.1.5": | ||
| version "6.1.5" | ||
| resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-6.1.5.tgz#b3e06bc09346ad94206bcc71c46538d5b6dc4883" | ||
| integrity sha512-JzMRiRRu8J0yUMC7BV8wOVzevjkHnIPONbpCTL/vH5yceTm+dSH/U3esIObgk8wYYbov+jYlVhwUQNGRb2to6g== | ||
| dependencies: | ||
| nanoid "^3.1.23" | ||
|
|
||
| "@react-navigation/stack@^6.3.7": | ||
| version "6.3.7" | ||
| resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-6.3.7.tgz#a2c0e08c8cc8696da203eba6905025ce8665f40a" | ||
| integrity sha512-M0gGeIpXmY08ZxZlHO9o/NLj9lO4zGdTll+a9e40BwfSxR5v6R34msKHUJ57nxrzvr2/MSSllZRkW3wc8woKFg== | ||
| dependencies: | ||
| "@react-navigation/elements" "^1.3.9" | ||
| color "^4.2.3" | ||
| warn-once "^0.1.0" | ||
|
|
||
| "@sideway/address@^4.1.3": | ||
| version "4.1.4" | ||
|
|
@@ -1947,7 +1958,7 @@ collection-visit@^1.0.0: | |
| map-visit "^1.0.0" | ||
| object-visit "^1.0.0" | ||
|
|
||
| color-convert@^1.9.0: | ||
| version "1.9.3" | ||
| resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" | ||
| integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== | ||
|
|
@@ -1971,21 +1982,21 @@ color-name@^1.0.0, color-name@~1.1.4: | |
| resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" | ||
| integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== | ||
|
|
||
| color-string@^1.9.0: | ||
| version "1.9.1" | ||
| resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4" | ||
| integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg== | ||
| dependencies: | ||
| color-name "^1.0.0" | ||
| simple-swizzle "^0.2.2" | ||
|
|
||
| color@^4.2.3: | ||
| version "4.2.3" | ||
| resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a" | ||
| integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A== | ||
| dependencies: | ||
| color-convert "^2.0.1" | ||
| color-string "^1.9.0" | ||
|
|
||
| colorette@^1.0.7, colorette@^1.2.2: | ||
| version "1.2.2" | ||
|
|
@@ -2163,6 +2174,11 @@ decode-uri-component@^0.2.0: | |
| resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545" | ||
| integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU= | ||
|
|
||
| decode-uri-component@^0.2.2: | ||
| version "0.2.2" | ||
| resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9" | ||
| integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ== | ||
|
|
||
| deepmerge@^3.2.0: | ||
| version "3.3.0" | ||
| resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.3.0.tgz#d3c47fd6f3a93d517b14426b0628a17b0125f5f7" | ||
|
|
@@ -2403,6 +2419,11 @@ extglob@^2.0.4: | |
| snapdragon "^0.8.1" | ||
| to-regex "^3.0.1" | ||
|
|
||
| fast-deep-equal@^3.1.3: | ||
| version "3.1.3" | ||
| resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" | ||
| integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== | ||
|
|
||
| fb-watchman@^2.0.0: | ||
| version "2.0.1" | ||
| resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.1.tgz#fc84fb39d2709cf3ff6d743706157bb5708a8a85" | ||
|
|
@@ -3648,7 +3669,7 @@ [email protected]: | |
| resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" | ||
| integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== | ||
|
|
||
| nanoid@^3.1.23: | ||
| version "3.3.4" | ||
| resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab" | ||
| integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw== | ||
|
|
@@ -4072,12 +4093,12 @@ pump@^3.0.0: | |
| end-of-stream "^1.1.0" | ||
| once "^1.3.1" | ||
|
|
||
| query-string@^7.0.0: | ||
| version "7.1.3" | ||
| resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.3.tgz#a1cf90e994abb113a325804a972d98276fe02328" | ||
| integrity sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg== | ||
| dependencies: | ||
| decode-uri-component "^0.2.2" | ||
| filter-obj "^1.1.0" | ||
| split-on-first "^1.0.0" | ||
| strict-uri-encode "^2.0.0" | ||
|
|
@@ -4095,6 +4116,11 @@ [email protected]: | |
| shell-quote "^1.6.1" | ||
| ws "^7" | ||
|
|
||
| react-freeze@^1.0.0: | ||
| version "1.0.3" | ||
| resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d" | ||
| integrity sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g== | ||
|
|
||
| "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.1.0: | ||
| version "18.2.0" | ||
| resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" | ||
|
|
@@ -4141,11 +4167,6 @@ react-native-gradle-plugin@^0.70.3: | |
| resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz#cbcf0619cbfbddaa9128701aa2d7b4145f9c4fc8" | ||
| integrity sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A== | ||
|
|
||
| [email protected]: | ||
| version "2.12.0" | ||
| resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.12.0.tgz#5821eecfb1769b1617a67a2d4dec12fdeedb2b6e" | ||
|
|
@@ -4164,10 +4185,13 @@ react-native-safe-area-context@^3.1.9: | |
| resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.4.1.tgz#c967a52903d55fe010b2428e5368b42f1debc0a7" | ||
| integrity sha512-xfpVd0CiZR7oBhuwJ2HcZMehg5bjha1Ohu1XHpcT+9ykula0TgovH2BNU0R5Krzf/jBR1LMjR6VabxdlUjqxcA== | ||
|
|
||
| react-native-screens@^3.18.2: | ||
| version "3.18.2" | ||
| resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.18.2.tgz#d7ab2d145258d3db9fa630fa5379dc4474117866" | ||
| integrity sha512-ANUEuvMUlsYJ1QKukEhzhfrvOUO9BVH9Nzg+6eWxpn3cfD/O83yPBOF8Mx6x5H/2+sMy+VS5x/chWOOo/U7QJw== | ||
| dependencies: | ||
| react-freeze "^1.0.0" | ||
| warn-once "^0.1.0" | ||
|
|
||
| [email protected]: | ||
| version "12.4.4" | ||
|
|
@@ -4985,6 +5009,11 @@ urix@^0.1.0: | |
| resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72" | ||
| integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI= | ||
|
|
||
| use-latest-callback@^0.1.5: | ||
| version "0.1.5" | ||
| resolved "https://registry.yarnpkg.com/use-latest-callback/-/use-latest-callback-0.1.5.tgz#a4a836c08fa72f6608730b5b8f4bbd9c57c04f51" | ||
| integrity sha512-HtHatS2U4/h32NlkhupDsPlrbiD27gSH5swBdtXbCAlc6pfOFzaj0FehW/FO12rx8j2Vy4/lJScCiJyM01E+bQ== | ||
|
|
||
| use-sync-external-store@^1.0.0: | ||
| version "1.2.0" | ||
| resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" | ||
|
|
@@ -5022,6 +5051,11 @@ walker@^1.0.7: | |
| dependencies: | ||
| makeerror "1.0.x" | ||
|
|
||
| warn-once@^0.1.0: | ||
| version "0.1.1" | ||
| resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43" | ||
| integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q== | ||
|
|
||
| wcwidth@^1.0.1: | ||
| version "1.0.1" | ||
| resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8" | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,7 +9,7 @@ | |
| #import "RCTOnPageSelected.h" | ||
| #import <math.h> | ||
|
|
||
| @interface ReactNativePageView () <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate, UIGestureRecognizerDelegate> | ||
|
|
||
| @property(nonatomic, strong) UIPageViewController *reactPageViewController; | ||
| @property(nonatomic, strong) RCTEventDispatcher *eventDispatcher; | ||
|
|
@@ -79,6 +79,11 @@ - (void)didMoveToWindow { | |
| [self embed]; | ||
| [self setupInitialController]; | ||
| } | ||
|
|
||
| UIPanGestureRecognizer* panGestureRecognizer = [UIPanGestureRecognizer new]; | ||
| self.panGestureRecognizer = panGestureRecognizer; | ||
| panGestureRecognizer.delegate = self; | ||
| [self addGestureRecognizer: panGestureRecognizer]; | ||
|
|
||
| if (self.reactViewController.navigationController != nil && self.reactViewController.navigationController.interactivePopGestureRecognizer != nil) { | ||
| [self.scrollView.panGestureRecognizer requireGestureRecognizerToFail:self.reactViewController.navigationController.interactivePopGestureRecognizer]; | ||
|
|
@@ -461,4 +466,28 @@ - (NSString *)determineScrollDirection:(UIScrollView *)scrollView { | |
| - (BOOL)isLtrLayout { | ||
| return [_layoutDirection isEqualToString:@"ltr"]; | ||
| } | ||
|
|
||
|
|
||
| - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer { | ||
|
|
||
| // The below snippet disables the pager view's scrollview's scroll when current index is 0 and user is swiping back. Useful for fullScreenGestureEnabled in react-native-screens | ||
|
There was a problem hiding this comment. I wonder if this should also happen if it's the last page and the user is swiping in the other direction. It's not related to native stack but it would make it work when it's nested in something else with horizontal gestures. For example, maybe drawer on the right. There was a problem hiding this comment. okay. I misunderstood what you meant. I think in that case, it'll default to There was a problem hiding this comment. Did some quick testing with the drawer, this method doesn't run for the drawer as the gesture never reaches the page view (because of Overlay). Screen.Recording.2022-12-04.at.6.55.04.AM.movScreen.Recording.2022-12-04.at.7.23.23.AM.movI still think that even if it runs for some horizontal gesture, it should be "mostly" fine. Scenario - Someone adds a horizontal gesture recognizer to a parent view of the pager view.
Edit: In the above scenario, they'd receive the simultaneous event as you mentioned in the first message, feels less safe. There was a problem hiding this comment. Relatively Safer alternative that works. One downside is that it depends upon the member class name for pan gesture used in RN Screens // The below snippet disables the pager view's scrollview's scroll when current index is 0 and user is swiping back. Useful for fullScreenGestureEnabled in RN Screens
- (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"]) {
UIPanGestureRecognizer* panGestureRecognizer = (UIPanGestureRecognizer*) gestureRecognizer;
CGPoint velocity = [panGestureRecognizer velocityInView:self];
BOOL isLTR = [self isLtrLayout];
BOOL isBackGesture = (isLTR && velocity.x > 0) || (!isLTR && velocity.x < 0);
if (self.currentIndex == 0 && isBackGesture) {
self.scrollView.panGestureRecognizer.enabled = false;
} else {
self.scrollView.panGestureRecognizer.enabled = self.scrollEnabled;
}
return YES;
}
self.scrollView.panGestureRecognizer.enabled = self.scrollEnabled;
return NO;
}
|
||
| if (gestureRecognizer == self.panGestureRecognizer) { | ||
| UIPanGestureRecognizer* panGestureRecognizer = (UIPanGestureRecognizer*) gestureRecognizer; | ||
| CGPoint velocity = [panGestureRecognizer velocityInView:self]; | ||
| BOOL isLTR = [self isLtrLayout]; | ||
| BOOL isBackGesture = (isLTR && velocity.x > 0) || (!isLTR && velocity.x < 0); | ||
| if (otherGestureRecognizer == self.scrollView.panGestureRecognizer && self.currentIndex == 0 && isBackGesture) { | ||
| self.scrollView.panGestureRecognizer.enabled = false; | ||
| return NO; | ||
| } | ||
|
|
||
| self.scrollView.panGestureRecognizer.enabled = self.scrollEnabled; | ||
| return YES; | ||
| } | ||
|
|
||
| // Resetting here to default in case we add more recognizer. | ||
| self.scrollView.panGestureRecognizer.enabled = self.scrollEnabled; | ||
|
There was a problem hiding this comment. This LOC will be unreachable as of now as we added only one recognizer. But still resetting the value for sanity. |
||
| return NO; | ||
| } | ||
|
|
||
| @end | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we blindly bump a major version of React Navigation ? Do we have to do a migration ?