React-native-tab-view: Swipe could trigger onPress action by mistake

[ikzjfr0]

Current behaviour

My application contains couple pages, each page is a list. Click each list item and jump to a different view. The problem is when current page is the first/last page and scroll left/right, it triggers "Click" action.

The root cause is in TabViewPageScroll.js, we should set onStartShouldSetResponderCapture in ScrollView. In Facebook document, it says: "So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true". Here is the document link.

<ScrollView
        horizontal
        pagingEnabled
        directionalLockEnabled
        keyboardDismissMode="on-drag"
        keyboardShouldPersistTaps="always"
        overScrollMode="never"
        scrollEnabled={this.props.swipeEnabled}
        automaticallyAdjustContentInsets={false}
        bounces={false}
        alwaysBounceHorizontal={false}
        scrollsToTop={false}
        showsHorizontalScrollIndicator={false}
        scrollEventThrottle={1}
        onScroll={this._handleScroll}
        onScrollBeginDrag={onSwipeStart}
        onMomentumScrollEnd={this._handleMomentumScrollEnd}
        contentOffset={this.state.initialOffset}
        style={styles.container}
        contentContainerStyle={layout.width ? null : styles.container}
        onStartShouldSetResponderCapture = {(evt) => true}    //we should add this two lines of code
        onMoveShouldSetResponderCapture = {(evt) => true}  //we should add this two lines of code
        ref={el => (this._scrollView = el)}
      >
        {React.Children.map(children, (child, i) => (
          <View
            key={navigationState.routes[i].key}
            testID={navigationState.routes[i].testID}
            style={
              layout.width
                ? { width: layout.width, overflow: 'hidden' }
                : i === navigationState.index ? styles.page : null
            }
          >
            {i === navigationState.index || layout.width ? child : null}
          </View>
        ))}
      </ScrollView>

Screenshots (if applicable)

What have you tried

Your Environment

| software | version
| --------------------- | -------
| ios or android | iOS 11
| react-native | 0.55
| react-native-tab-view | 1.0
| node | 9.4
| npm or yarn | 5.6

[ikzjfr0]

On old iPhones (iPhone 5/5s), my above proposal works perfect. However, surprisingly on iPhoneX/7/6/8 it does not work but could disable onPress action. I'm not sure why.

Another way is to make bounces = true in ScrollView of TabViewPagerScroll.js

[lixaotec]

Dear fellows @ikzjfr0 and @satya164 , I think my issue #570 is related to this.

When swipes tabs at Android it seem to get two ahead. However it works well at ihpne 5s. I can´t tell on newer Iphones but I hope its the same issue.

Do you have any workaround for instance?

Appreciate your help. Thanks.

[ikzjfr0]

@lixaotec set bounces={true} is a possible solution

[satya164]

Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated addresses a many platform specific bugs and performance problems. The documentation is updated as well.

Please try the new version and see if it addresses your issue. If not, please open a new issue following the issue template.

[Aryk]

I'm still getting this issue on 2.14.0. Is there any setting I should be looking at?