React native How to make scrollview only work with two fingers or long press?

Question

I have a scroll view react native element I am working with and I would like to limit the scroll to only work either using two fingers or when the user long presses then scrolls.

is this possible? if so How? Here is my current code. Longpressgesture handler is rocgnizing any of the touch events.

export default function SiteCard({route, navigation}) {
  const { site } = route.params;
  const [urls, setUrls] = useState({
    url2: site,
  })
  const webViewRef = useRef();

  const onLongPress = (event) => {
    if (event.nativeEvent.state === State.ACTIVE) {
      alert("I've been pressed for 800 milliseconds");
    }
  };

  return (
    <LongPressGestureHandler
    onHandlerStateChange={onLongPress}
    minDurationMs={200}
  >
    <ScrollView scrollEnabled={false}
    style={styles.tab}
    level='1'>
    <View>
      <WebView
          source={{ uri: urls.url2 }}
          style={styles.PageView}
          ref={webViewRef}
        />
    </View>
    </ScrollView>
  </LongPressGestureHandler>
  );
};


const styles = StyleSheet.create({
  PageView: {
    height: 800,
  }
});

Answer 1

There's a boolean prop called scrollEnabled that can be set to false to prevent the user from scrolling.

See: reactnative.dev/docs/scrollview.html#scrollenabled

You would just have to detect wether there's a long press or two fingers on the screen to switch the boolean to true .

I didn't dive into it but it seems to be a good place to start: react-native-gesture-handler