[iOS] go back gesture does not work

[KingAmo]

Description

Go back gesture is blocked, bc all events are captured by viewpager, hence react navigation is not aware of any pan event.

Reproducible Demo

Go to basic example and try to use go back gesture

[troZee]

Together with @mikeqcp were trying to find any viable solution. Below I am providing a result of our investigation.

• When we set self.scrollView.scrollEnabled = NO to UIScrollView, it works fine, bc events are captured by react navigation. But then we cannot enable the scrolling inside the pagerview, bc pagerview would not capture any events.

• We were trying to implement touchesBegan/touchesEnded/touchesMoved but it did not changed anything

[svenlombaert]

Same issue when using react-native-navigation. I'm using https://github.com/satya164/react-native-tab-view and it indeed seems to capture all gestures, can't swipe to open side menu as well.

[marcel-happyfloat]

In my old version I did use react-native-best-viewpager and both worked well, not sure if the foundation is comparable, but maybe you can check it out.

But I had to disable the gesture of the navigator when I was on the next page, so I could go back the page instead of the navigator when I was swiping close to the edge.

[alantoa]

+1 Same issue when using react-native-navigation.

[JoniVR]

FYI, for react-navigation (and perhaps also react-native-navigation): downgrading react-native-tab-view to v2.16.0 seems to resolve the issue for now.

[1061750360]

I have a temporary solution. When you want to go back, you should forbid react-native-pager-view,let it can not scroll. (My English is not good, so Please understand)

This is the code:

step 1: pagerView has three child, curTabIndex is current child index. So curTabIndex === 0 is the first child,And now you wan t to go back. And the evt.nativeEvent.pageX <= 50 is true(because IOS back gesture distance Approximately equal to 50).you forbid react-native-pager-view,let it can not scroll. Now you can use gesture to go back!

  const panResponder = useRef(
      PanResponder.create({
        onMoveShouldSetPanResponder: () => true,
        onPanResponderGrant: (evt, gestureState) => {
          if (evt.nativeEvent.pageX <= 50 && curTabIndex === 0) {
            pagerViewRef.current.setScrollEnabled(false)
          }
        },
        onPanResponderRelease: () => {
          pagerViewRef.current.setScrollEnabled(true)
        }
      })
  ).current;

step 2: and add panResponder to the root node

  return (
      <View style={{width:width,height:height,display:'flex'}} {...panResponder.panHandlers}>
      ......

step 3:

          <PagerView
              style={{flex:1,backgroundColor:"#fff"}}
              ref={pagerViewRef}
              keyboardDismissMode={'on-drag'}
              orientation="horizontal"
              transitionStyle="scroll"
              layoutDirection="ltr"
              onPageSelected={(e) => onPageSelected(e.nativeEvent.position)}
          >

[troZee]

https://github.com/callstack/react-native-pager-view/releases/tag/v5.4.19

[itsramiel]

@troZee does not seem to fix it. I still can not swipe back

[ChrisYohann]

Hi @troZee, I have the same issue as @ramiel1999 even in 5.4.24. Cannot swipe back and using a TabView inside StackNavigator