fix(#722): revert not working back navigation gesture in favour of PagerView inside ScrollView (#933)

Author: MateWW

example/src/App.tsx

@@ -30,6 +30,7 @@ import TabBarIconExample from './tabView/TabBarIconExample';
 import CustomIndicatorExample from './tabView/CustomIndicatorExample';
 import CustomTabBarExample from './tabView/CustomTabBarExample';
 import CoverflowExample from './tabView/CoverflowExample';
+import { TabViewInsideScrollViewExample } from './tabView/TabViewInsideScrollViewExample';
 import ReanimatedOnPageScrollExample from './ReanimatedOnPageScrollExample';
 import { MaterialTopBarExample } from './MaterialTopTabExample';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
@@ -49,6 +50,7 @@ const examples = [
     component: ScrollablePagerViewExample,
     name: 'Scrollable PagerView Example',
   },
+  { component: TabViewInsideScrollViewExample, name: 'TabView inside ScrollView Example' },
   {
     component: ScrollViewInsideExample,
     name: 'ScrollView inside PagerView Example',

example/src/tabView/TabViewInsideScrollViewExample.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { View, useWindowDimensions, Text, ScrollView } from 'react-native';
+import { TabView, SceneMap } from 'react-native-tab-view';
+import { Header } from 'react-native/Libraries/NewAppScreen';
+
+function FirstRoute() {
+  return (
+    <View style={{ flex: 1, padding: 20, backgroundColor: 'blue' }}>
+      <Text style={{color: 'white'}}>First Route</Text>
+    </View>
+  );
+}
+
+function SecondRoute() {
+  return (
+    <View style={{ flex: 1, padding: 20, backgroundColor: 'purple' }}>
+      <Text style={{color: 'white'}}>Second Route</Text>
+    </View>
+  );
+}
+
+const renderScene = SceneMap({
+  first: FirstRoute,
+  second: SecondRoute,
+});
+
+const routes = [
+  { key: 'first', title: 'First' },
+  { key: 'second', title: 'Second' },
+];
+
+export function TabViewInsideScrollViewExample() {
+  const layout = useWindowDimensions();
+  const [index, setIndex] = React.useState(0);
+
+  return (
+    <ScrollView
+      contentContainerStyle={{flexGrow: 1, backgroundColor: 'red'}}
+      nestedScrollEnabled={false}
+      scrollEnabled={true}
+    >
+      <Header />
+
+      <View>
+        <TabView
+          style={{height: 1200}}
+          navigationState={{ index, routes }}
+          renderScene={renderScene}
+          onIndexChange={setIndex}
+          initialLayout={{ width: layout.width }}
+        />
+      </View>
+    </ScrollView>
+  );
+}

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 @@ - (instancetype)initWithFrame:(CGRect)frame
         _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 @@ + (ComponentDescriptorProvider)componentDescriptorProvider
     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)

ios/RNCPagerView.m

@@ -9,9 +9,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) id<RCTEventDispatcherProtocol> eventDispatcher;
@@ -51,10 +49,6 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge {
         _cachedControllers = [NSHashTable hashTableWithOptions:NSHashTableStrongMemory];
         _overdrag = NO;
         _layoutDirection = @"ltr";
-        UIPanGestureRecognizer* panGestureRecognizer = [UIPanGestureRecognizer new];
-        self.panGestureRecognizer = panGestureRecognizer;
-        panGestureRecognizer.delegate = self;
-        [self addGestureRecognizer: panGestureRecognizer];
     }
     return self;
 }
@@ -480,28 +474,6 @@ - (NSString *)determineScrollDirection:(UIScrollView *)scrollView {
     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"];
 }