Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';
Expand All @@ -47,6 +48,7 @@ const examples = [
component: ScrollablePagerViewExample,
name: 'Scrollable PagerView Example',
},
{ component: TabViewInsideScrollViewExample, name: 'TabView inside ScrollView Example' },
{
component: ScrollViewInsideExample,
name: 'ScrollView inside PagerView Example',
Expand Down
55 changes: 55 additions & 0 deletions example/src/tabView/TabViewInsideScrollViewExample.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
33 changes: 1 addition & 32 deletions ios/Fabric/RNCPagerViewComponentView.mm
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -409,30 +402,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)
Expand Down
30 changes: 1 addition & 29 deletions ios/RNCPagerView.m
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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"];
}
Expand Down
Loading