React-native-swiper: Can't scroll when swiper is wrapped with touchable

[tankpower1]

I have a TouchableOpacity with a Swiper as its first child and every time i try to swipe it activates the onPress of the TouchableOpacity. How can i fix this?

[Prashantrao331]

any solution?

[developerantoniosousa]

I had the same problem, I fixed putying a View with the prop onStartShouldSetResponder, it's returns a function that return true value

<Swiper
      style={styles.wrapper}
      dot={<View style={styles.dot} />}
      activeDot={<View style={styles.activeDot} />}>
      {imagesFormatedArray.map((image) => (
        <View onStartShouldSetResponder={() => true}>
          <Image
            key={image.imageId}
            style={[styles.image, imageStyle]}
            source={{
              uri: image.uri,
            }}
          />
        </View>
      ))}
    </Swiper>

[hooksoft]

I had a similar problem and was blaming this package. Changed to and the behaviour persisted.
Lost 2 hours to find out a component was actually 100% width and was covering my target. :(
Then it was a simple case of adding pointerEvents="box-none" in the right places.

[dwidc]

I use solution from https://github.com/leecade/react-native-swiper/issues/698#issuecomment-590179071 . And it works.
No more accidental onPress trigger on TouchableOpacity when swiping.
You only need to wrap TouchableOpacity inside View with onMoveShouldSetResponderCapture return true.

Example:

      const items = new Array(5).fill('Banner ').map((value, index) => `${value}${index + 1}`);
.....

      <Swiper
        style={{ height: 200 }}
        showsButtons={false}
        activeDotColor="white"
        autoplay>
        {items.map((value, index) => {
          return (
            <View
              key={index.toString()}
              style={{ flex: 1 }}
              onMoveShouldSetResponderCapture={() => true}>
              <TouchableOpacity
                onPress={this.onItemClicked}
                style={{
                  flex: 1,
                  justifyContent: 'center',
                  alignItems: 'center',
                  backgroundColor: 'royalblue',
                }}>
                <Text style={{ color: 'white' }}>{value}</Text>
              </TouchableOpacity>
            </View>
          );
        })}
      </Swiper>