(iOS) `velocityX` of `PanGestureHandler` is always 0 because of `gestureRecognizer`

[dprevost-LMI]

Environment

React native 73 with react-native-pager-view version 6.2.0 required by react-native-tab-view.
iOS 17 or 18

Description

I’m using the react-native-gesture-handler/PanGestureHandler and react-native/Animated.View to have a swipeable card where, when doing a left swipe, it shows a button under the card at the right. After upgrading to react-native-pager-view version 6.2.0 on iOS, the behaviour started failing. When doing horizontal swipes on my card, the event.nativeEvent.velocityX was always 0 from the onHandlerStateChange of the PanGestureHandler, so I was not able to recognize the left-right swipe.

This PR sounds related to that failure. Using a patch, I removed the gestureRecognizer, and it fixed my issue. I’m not sure I fully understand the why, though since I’m no iOS pro. I also observed that only a press seems possible, no swipe

Reproducible Demo

Used lib

"react-native": "0.73.9"
"react-native-reanimated": "3.16.6",
"react-native-screens": "3.35.0",
"react-native-pager-view": "6.2.0",
"react-native-tab-view": "3.1.1",

Snippet:

  const minDist = 40;
  const activeOffsetX: [number, number] = [-minDist, minDist];

  const onHandlerStateChange = (event: PanGestureHandlerStateChangeEvent) => {
    console.log('event.nativeEvent.velocityX', event.nativeEvent.velocityX);
  };
  const topLayerAnimatedStyle = [{ zIndex: 1 }, { transform: [{ translateX }] }];
  const onGestureEvent = (event: PanGestureHandlerGestureEvent) => {
    dragX.setValue(event.nativeEvent.translationX + offsetX);
  };

  return (
    <>
      <PanGestureHandler
        activeOffsetX={activeOffsetX}
        onGestureEvent={onGestureEvent}
        onHandlerStateChange={onHandlerStateChange}
      >
        <Animated.View style={topLayerAnimatedStyle}>{children}</Animated.View>
      </PanGestureHandler>
    </>
  );

With my patch or on version 6.1.4 my output is:

 LOG  event.nativeEvent.velocityX 0
 LOG  event.nativeEvent.velocityX -1002.9360699191757
 LOG  event.nativeEvent.velocityX -245.47632455384255
 LOG  event.nativeEvent.velocityX 0
 LOG  event.nativeEvent.velocityX -1249.3361543957585
 LOG  event.nativeEvent.velocityX -63.76235796194474
 LOG  event.nativeEvent.velocityX 0
 LOG  event.nativeEvent.velocityX -2644.1441499830335
 LOG  event.nativeEvent.velocityX -16.774982503172016
 LOG  event.nativeEvent.velocityX 0
 LOG  event.nativeEvent.velocityX -581.1156704515844
 LOG  event.nativeEvent.velocityX -20.014514665633452
 LOG  event.nativeEvent.velocityX 0
 LOG  event.nativeEvent.velocityX -1642.6676575322836
 LOG  event.nativeEvent.velocityX -36.247993423507644
 LOG  event.nativeEvent.velocityX 0
 LOG  event.nativeEvent.velocityX 2148.9406521571445
 LOG  event.nativeEvent.velocityX 820.4758208075385
 LOG  event.nativeEvent.velocityX 0
 LOG  event.nativeEvent.velocityX -977.1913252058387
 LOG  event.nativeEvent.velocityX -117.93175092593243

After upgrading to 6.2.0 or without my patch, I have the below output, and the swipe does not work; only the press seems to occur, explaining why I have less output than above.

 LOG  event.nativeEvent.velocityX 0
 LOG  event.nativeEvent.velocityX 0
 LOG  event.nativeEvent.velocityX 0
 LOG  event.nativeEvent.velocityX 0
 LOG  event.nativeEvent.velocityX 0
 LOG  event.nativeEvent.velocityX 0

Note: I tried upgrading to "react-native-tab-view": "4.0.5", but it did not fix the issue!

[dprevost-LMI]

The patch I used:

diff --git a/node_modules/react-native-pager-view/ios/Fabric/RNCPagerViewComponentView.mm b/node_modules/react-native-pager-view/ios/Fabric/RNCPagerViewComponentView.mm
index 8efd1ba..5d9b808 100644
--- a/node_modules/react-native-pager-view/ios/Fabric/RNCPagerViewComponentView.mm
+++ b/node_modules/react-native-pager-view/ios/Fabric/RNCPagerViewComponentView.mm
@@ -15,9 +15,7 @@
 
 using namespace facebook::react;
 
-@interface RNCPagerViewComponentView () <RCTRNCViewPagerViewProtocol, UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate, UIGestureRecognizerDelegate>
-
-@property(nonatomic, assign) UIPanGestureRecognizer* panGestureRecognizer;
+@interface RNCPagerViewComponentView () <RCTRNCViewPagerViewProtocol, UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate>
 
 @end
 
@@ -66,11 +64,6 @@ using namespace facebook::react;
         _destinationIndex = -1;
         _layoutDirection = @"ltr";
         _overdrag = NO;
-        UIPanGestureRecognizer* panGestureRecognizer = [UIPanGestureRecognizer new];
-        self.panGestureRecognizer = panGestureRecognizer;
-        panGestureRecognizer.delegate = self;
-        [self addGestureRecognizer: panGestureRecognizer];
-
     }
     
     return self;
@@ -405,30 +398,6 @@ using namespace facebook::react;
     return concreteComponentDescriptorProvider<RNCViewPagerComponentDescriptor>();
 }
 
-
-- (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) {
-            scrollView.panGestureRecognizer.enabled = false;
-        } else {
-            const auto &viewProps = *std::static_pointer_cast<const RNCViewPagerProps>(_props);
-            scrollView.panGestureRecognizer.enabled = viewProps.scrollEnabled;
-        }
-        
-        return YES;
-    }
-    const auto &viewProps = *std::static_pointer_cast<const RNCViewPagerProps>(_props);
-    scrollView.panGestureRecognizer.enabled = viewProps.scrollEnabled;
-    return NO;
-}
-
 @end
 
 Class<RCTComponentViewProtocol> RNCViewPagerCls(void)
diff --git a/node_modules/react-native-pager-view/ios/ReactNativePageView.m b/node_modules/react-native-pager-view/ios/ReactNativePageView.m
index 998e70a..ab0fc7f 100644
--- a/node_modules/react-native-pager-view/ios/ReactNativePageView.m
+++ b/node_modules/react-native-pager-view/ios/ReactNativePageView.m
@@ -9,9 +9,7 @@
 #import "RCTOnPageSelected.h"
 #import <math.h>
 
-@interface ReactNativePageView () <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate, UIGestureRecognizerDelegate>
-
-@property(nonatomic, assign) UIPanGestureRecognizer* panGestureRecognizer;
+@interface ReactNativePageView () <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate>
 
 @property(nonatomic, strong) UIPageViewController *reactPageViewController;
 @property(nonatomic, strong) RCTEventDispatcher *eventDispatcher;
@@ -47,10 +45,6 @@
         _cachedControllers = [NSHashTable hashTableWithOptions:NSHashTableStrongMemory];
         _overdrag = NO;
         _layoutDirection = @"ltr";
-        UIPanGestureRecognizer* panGestureRecognizer = [UIPanGestureRecognizer new];
-        self.panGestureRecognizer = panGestureRecognizer;
-        panGestureRecognizer.delegate = self;
-        [self addGestureRecognizer: panGestureRecognizer];
     }
     return self;
 }
@@ -466,28 +460,6 @@
     return scrollDirection;
 }
 
-- (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;
-}
-
 - (BOOL)isLtrLayout {
     return [_layoutDirection isEqualToString:@"ltr"];
 }

[dprevost-LMI]

By searching a bit more, the PR mentioned seems to have spilled a lot of ink:

• Revert "feat(ios): back gesture with full screen swipe (#705)" #771
• fix(722): revert not working back navigation gesture in favour of PagerView inside ScrollView #933
• 6.2.0 breaks vertical scrolling of ScrollView parent #722
• after upgrade from version 5.4.25 to 6.6.1 the viewPager blocked the scroll of parent flatList in ios #948
• fix(ios): parent scroll view not able to scroll #734
• nested ScrollView is not working inside PagerView #848
• PagerView consumes all vertical scroll gestures when inside ScrollView #956
• PagerView blocks cross-axis orientation gestures. #955
• Conflicts when nesting PagerView inside of Material Top/Bottom Tab navigator #745
• 6.2.0 breaks gestures in other components that use PanResponder #713
• Cannot swipe to other screen on first and last index with react-navigation material-top-tabs #710
• Maybe more...

So it would be appreciated if this issue could be looked into and maybe have a little push in merging #933?

Meanwhile, for others, using the above patch or this smaller patch will indeed unblock you!

Update: I tried the smaller patch, and it works, but only in my first tab and not in other tabs! So, I revert the PR completely

[marsakt]

Small update from my side, I wanted to use / create the patch for the latest version:

package.json:

"patch-package": "^8.0.0",
"postinstall-postinstall": "^2.1.0",
"react-native-pager-view": "6.7.0",

following content has to be stored in \patches\react-native-pager-view+6.7.0.patch

diff --git a/node_modules/react-native-pager-view/ios/Fabric/RNCPagerViewComponentView.mm b/node_modules/react-native-pager-view/ios/Fabric/RNCPagerViewComponentView.mm
index 652a5c1..067f92e 100644
--- a/node_modules/react-native-pager-view/ios/Fabric/RNCPagerViewComponentView.mm
+++ b/node_modules/react-native-pager-view/ios/Fabric/RNCPagerViewComponentView.mm
@@ -14,9 +14,7 @@
 
 using namespace facebook::react;
 
-@interface RNCPagerViewComponentView () <RCTRNCViewPagerViewProtocol, UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate, UIGestureRecognizerDelegate>
-
-@property(nonatomic, assign) UIPanGestureRecognizer* panGestureRecognizer;
+@interface RNCPagerViewComponentView () <RCTRNCViewPagerViewProtocol, UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate>
 
 @end
 
@@ -73,11 +71,6 @@ using namespace facebook::react;
         _destinationIndex = -1;
         _layoutDirection = @"ltr";
         _overdrag = NO;
-        UIPanGestureRecognizer* panGestureRecognizer = [UIPanGestureRecognizer new];
-        self.panGestureRecognizer = panGestureRecognizer;
-        panGestureRecognizer.delegate = self;
-        [self addGestureRecognizer: panGestureRecognizer];
-
     }
     
     return self;
@@ -420,30 +413,6 @@ using namespace facebook::react;
     return concreteComponentDescriptorProvider<RNCViewPagerComponentDescriptor>();
 }
 
-
-- (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) {
-            scrollView.panGestureRecognizer.enabled = false;
-        } else {
-            const auto &viewProps = *std::static_pointer_cast<const RNCViewPagerProps>(_props);
-            scrollView.panGestureRecognizer.enabled = viewProps.scrollEnabled;
-        }
-        
-        return YES;
-    }
-    const auto &viewProps = *std::static_pointer_cast<const RNCViewPagerProps>(_props);
-    scrollView.panGestureRecognizer.enabled = viewProps.scrollEnabled;
-    return NO;
-}
-
 @end
 
 Class<RCTComponentViewProtocol> RNCViewPagerCls(void)
diff --git a/node_modules/react-native-pager-view/ios/RNCPagerView.m b/node_modules/react-native-pager-view/ios/RNCPagerView.m
index 507b45d..4253edc 100644
--- a/node_modules/react-native-pager-view/ios/RNCPagerView.m
+++ b/node_modules/react-native-pager-view/ios/RNCPagerView.m
@@ -8,9 +8,7 @@
 #import "RCTOnPageSelected.h"
 #import <math.h>
 
-@interface RNCPagerView () <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate, UIGestureRecognizerDelegate>
-
-@property(nonatomic, assign) UIPanGestureRecognizer* panGestureRecognizer;
+@interface RNCPagerView () <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate>
 
 @property(nonatomic, strong) UIPageViewController *reactPageViewController;
 @property(nonatomic, strong) RCTEventDispatcher *eventDispatcher;
@@ -48,10 +46,6 @@
         _cachedControllers = [NSHashTable hashTableWithOptions:NSHashTableStrongMemory];
         _overdrag = NO;
         _layoutDirection = @"ltr";
-        UIPanGestureRecognizer* panGestureRecognizer = [UIPanGestureRecognizer new];
-        self.panGestureRecognizer = panGestureRecognizer;
-        panGestureRecognizer.delegate = self;
-        [self addGestureRecognizer: panGestureRecognizer];
     }
     return self;
 }
@@ -474,28 +468,6 @@
     return scrollDirection;
 }
 
-- (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;
-}
-
 - (BOOL)isLtrLayout {
     return [_layoutDirection isEqualToString:@"ltr"];
 }

it works for me, I have nested react native pager views and scrolling works for both of them.

But I would like to ask you if somebody can create / finish / merge PR which will fix this problem on iOS

Thank you very much !!!

[MrRefactor]

I will be looking into that

[MrRefactor]

Closing, released 6.8.1 with a fix for this