Tabs switch incorrectly when swipe is released over another element

[aaulthudl]

Current behavior

I have a TabView alongside a sidebar. When a swipe is started on the view and is released at edge of the sidebar, the tab index doesn't change (onIndexChange() isn't called) but the tab still changes. This leaves the tabs in an incorrect state and some of the tabs can't be switched to.

https://user-images.githubusercontent.com/84314259/175305002-1deba6e6-e71e-43ac-ad46-c3b11382364a.mp4

Expected behavior

When a full swipe happens then the tab is changed correctly. Perhaps once the swipe leaves the view then it counts it as swiped, rather than waiting until the swipe is released.

Reproduction

I've forked this repo and added the sidebar to the example code. It is run as normal.

https://github.com/aaulthudl/react-native-tab-view

Platform

• [ ] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Environment

package	version
react-native-tab-view	3.1.1
react-native-pager-view	5.4.9
react-native	0.64.3
expo	44.0.0
node	12.13.0
npm or yarn	yarn@v1.22.18

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-pager-view (found: 5.4.9, latest: 5.4.24)
• react-native (found: 0.64.3, latest: 0.69.0)
• expo (found: 44.0.0, latest: 45.0.6)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[aaulthudl]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-pager-view (found: 5.4.9, latest: 5.4.24)
• react-native (found: 0.64.3, latest: 0.69.0)
• expo (found: 44.0.0, latest: 45.0.6)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

Upgraded to expo v45.0.6, react-native-pager-view v5.4.24 and react-native v0.68.2 because v0.69.0 isn't compatible with expo. I verify the issue is still happening.

[aaulthudl]

This previous issue was closed due to no repro steps. It is the same bug.

[aaulthudl]

This issue is actually in react-native-pager-view. We've added a patch using patch-package to end the swipe when it goes out of the tabview area to fix this temporarily.

diff --git a/node_modules/react-native-pager-view/.DS_Store b/node_modules/react-native-pager-view/.DS_Store
new file mode 100644
index 0000000..7083c2c
Binary files /dev/null and b/node_modules/react-native-pager-view/.DS_Store differ
diff --git a/node_modules/react-native-pager-view/ios/.DS_Store b/node_modules/react-native-pager-view/ios/.DS_Store
new file mode 100644
index 0000000..40daf43
Binary files /dev/null and b/node_modules/react-native-pager-view/ios/.DS_Store differ
diff --git a/node_modules/react-native-pager-view/ios/ReactNativePageView.m b/node_modules/react-native-pager-view/ios/ReactNativePageView.m
index 9f8ed5b..8ddad58 100644
--- a/node_modules/react-native-pager-view/ios/ReactNativePageView.m
+++ b/node_modules/react-native-pager-view/ios/ReactNativePageView.m
@@ -476,6 +476,16 @@ - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
         CGFloat contentOffset =[self isHorizontal] ? scrollView.contentOffset.x : scrollView.contentOffset.y;
         CGFloat topBound = [self isHorizontal] ? scrollView.bounds.size.width : scrollView.bounds.size.height;

+        // If a drag goes outside of the content container it should end the drag
+        CGFloat lastContentOffset = [self isHorizontal] ? self.lastContentOffset.x : self.lastContentOffset.y;
+        if (contentOffset <= 0 && lastContentOffset != 0) {
+            scrollView.scrollEnabled = NO;
+            scrollView.scrollEnabled = YES;
+
+            [self goTo:position animated:YES];
+            return;
+        }
+        
         if ((isFirstPage && contentOffset <= topBound) || (isLastPage && contentOffset >= topBound)) {
             CGPoint croppedOffset = [self isHorizontal] ? CGPointMake(topBound, 0) : CGPointMake(0, topBound);
             scrollView.contentOffset = croppedOffset;

[github-actions[bot]]

Hey! Thanks for opening the issue. Seems that this issue is in react-native-pager-view library which is a dependency of react-native-tab-view. Can you also post your issue in this repo so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it.