wcandillon / can-it-be-done-in-react-native

⚛️ 📺 Projects from the “Can it be done in React Native?” YouTube series
https://www.youtube.com/wcandillon
MIT License
4.04k stars 1.3k forks source link

Question: How do you filter gestures (two finger for example)? #83

Open shawnmitchell opened 4 years ago

shawnmitchell commented 4 years ago

In the Chrome Tab Sort demo, how would you restrict so that the PanGesture only started if two fingers?

Thanks!

shawnmitchell commented 4 years ago
return (
    <PanGestureHandler {...gestureHandler}>
      <Animated.View
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: TAB_SIZE,
          height: TAB_SIZE,
          justifyContent: "center",
          alignItems: "center",
          transform: [{ translateX }, { translateY }],
          zIndex
        }}
        onStartShouldSetResponder={(evt) => evt.nativeEvent.touches.length === 2}
      >
        <Tab {...{ tab }} />
      </Animated.View>
    </PanGestureHandler>
  );

I tried this, but no luck

shawnmitchell commented 4 years ago
  return (
    <PanGestureHandler 
      {...gestureHandler}
      minPointers={2}
    >
      <Animated.View
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: TAB_SIZE,
          height: TAB_SIZE,
          justifyContent: "center",
          alignItems: "center",
          transform: [{ translateX }, { translateY }],
          zIndex
        }}
      >
        <Tab {...{ tab }} />
      </Animated.View>
    </PanGestureHandler>
  );

Wow, super easy!

shawnmitchell commented 4 years ago

Wanted this for a case where SortableTabs would be in a scroll view