Merge pull request #919 from callstack/fix/#722/scroll-view-issue

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

Author: MateWW

Diff for: example/src/App.tsx

@@ -36,8 +36,10 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { NextBasicPagerViewExample } from './NextBasicPagerViewExample';
 import { PagerHookExample } from './PagerHookExample';
+import { NestedTabViewExample } from './tabView/NestedTabViewExample';
 
 const examples = [
+  { component: NestedTabViewExample, name: 'Nested TabView Example' },
   { component: BasicPagerViewExample, name: 'Basic Example' },
   { component: PagerHookExample, name: 'Pager Hook Example' },
   { component: KeyboardExample, name: 'Keyboard Example' },

Diff for: example/src/tabView/NestedTabViewExample.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 NestedTabViewExample() {
+  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>
+  );
+}

Diff for: ios/LEGACY/Fabric/LEGACY_RNCPagerViewComponentView.mm

@@ -14,9 +14,7 @@
 
 using namespace facebook::react;
 
-@interface LEGACY_RNCPagerViewComponentView () <RCTLEGACY_RNCViewPagerViewProtocol, UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate, UIGestureRecognizerDelegate>
-
-@property(nonatomic, assign) UIPanGestureRecognizer* panGestureRecognizer;
+@interface LEGACY_RNCPagerViewComponentView () <RCTLEGACY_RNCViewPagerViewProtocol, UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate>
 
 @end
 
@@ -71,11 +69,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;
@@ -409,30 +402,6 @@ + (ComponentDescriptorProvider)componentDescriptorProvider
     return concreteComponentDescriptorProvider<LEGACY_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 LEGACY_RNCViewPagerProps>(_props);
-            scrollView.panGestureRecognizer.enabled = viewProps.scrollEnabled;
-        }
-        
-        return YES;
-    }
-    const auto &viewProps = *std::static_pointer_cast<const LEGACY_RNCViewPagerProps>(_props);
-    scrollView.panGestureRecognizer.enabled = viewProps.scrollEnabled;
-    return NO;
-}
-
 @end
 
 Class<RCTComponentViewProtocol> LEGACY_RNCViewPagerCls(void)

Diff for: ios/LEGACY/LEGACY_RNCPagerView.m

@@ -8,9 +8,7 @@
 #import "RCTOnPageSelected.h"
 #import <math.h>
 
-@interface LEGACY_RNCPagerView () <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate, UIGestureRecognizerDelegate>
-
-@property(nonatomic, assign) UIPanGestureRecognizer* panGestureRecognizer;
+@interface LEGACY_RNCPagerView () <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate>
 
 @property(nonatomic, strong) UIPageViewController *reactPageViewController;
 @property(nonatomic, strong) RCTEventDispatcher *eventDispatcher;
@@ -48,10 +46,6 @@ - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher {
         _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 @@ - (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"];
 }