slider not working with touchable item react-native

[wimil]

I am creating a slider and when I add a touchable to the items, the slider no longer scrolls

<View
            key={key}
            {...slider.slidesProps[key]}
            onStartShouldSetResponder={event => true}
            onTouchEnd={e => {
              e.stopPropagation();
            }}>
            <TouchableHighlight onPress={onPress}>
              <Picture src={image} width={100} height={120} />
            </TouchableHighlight>
          </View>

[Tokke93]

Encountering the same issue with Pressable. Did you find a solution?

[feng138168]

I have the same problem

[federicogomezlara]

I have the same problem with TouchableOpacity

[matasmaciulaitis]

Unfortunately this library doesn't have onPress event handler, but I found a workaround. Drag gesture with 0 velocity is pretty much a press :)

[timotismjntk]

try this

const [touchMove, setTouchMove] = useState(false);

return (
      <View style={styles.slider} {...slider.containerProps}>
        {slides.map((item, index) => {
          return (
            <View
              key={index}
              {...slider.slidesProps[index]}
              onTouchMove={() => {
                setTouchMove(true);
              }}
              onTouchEnd={() => {
                if (touchMove) {
                  setTouchMove(false);
                } else {
                  try {
                    console.log(data[index].link);
                    Linking.openURL(data[index].link);
                  } catch (error) {}
                }
              }}>
               <Image
                  style={styles.image}
                  source={{uri: data[index]}}
                  resizeMethod="resize"
                />
        </View>
 </View>
);

[kangzheng97]

I have tried @matasmaciulaitis suggestion on dragEnded, however onPress will still be triggered when there is a tiny slide motion that bounced back to the original slide. As for @timotismjntk suggestion, it works fine for Android but not in iOS.

This is what I have done instead.

  const {
    onLayout,
    onStartShouldSetResponder,
    onResponderMove,
    onResponderRelease,
    onResponderTerminate,
  } = slider.containerProps;
  const [touchMove, setTouchMove] = useState(false);

  return (
    <View
      style={styles.slider}
      onLayout={onLayout}
      onStartShouldSetResponder={e => {
        onStartShouldSetResponder && onStartShouldSetResponder(e);
        return true;
      }}
      onResponderMove={e => {
        onResponderMove && onResponderMove(e);
        setTouchMove(true);
      }}
      onResponderRelease={e => {
        onResponderRelease && onResponderRelease(e);
        if (touchMove) {
          setTouchMove(false);
        } else {
          onPress();
        }
      }}
      onResponderTerminate={onResponderTerminate}>
      {imageUrls.map((imageUrl, index) => (
        <View key={index} {...slider.slidesProps[index]}>
          <Image
            source={{uri: imageUrl}}
            style={styles.image}
            resizeMode={backgroundSize}
          />
        </View>
      ))}
    </View>
  );

[timotismjntk]

ive manage to create a library abstracting this library and a pagination component too, pls check this out: (https://www.npmjs.com/package/@timotismjntk/react-native-carousel) @feng138168 @kangzheng97 @wimil @matasmaciulaitis

thanks