How avoid to press button on scroll React native

Question

I have two scrollviews with Pressable inside but when I scroll inside the scrollview it triggers the pressable button. I'd like to avoid trigger that pressable on scroll but only on press as it should be.

Here you can see what I mean : https://imgur.com/zh6Jch8 Sorry we can't see the mouse, I don't know how to show it with Android studio.

I've implemented onLongPress with Pressable but it's not really great as it results in worse user experience.

No code provided here : I just use Pressable with on onLongPress for now inside scrollview or Flatlist

Answer 1

Here's what I did.

use onPressIn and onPressOut to modify the style of my pressable through a "pressed" state. use onPress for my action, use onLongPress to do absolutely nothing so I can scroll without activating my action.

<Pressable
    onPressIn={() => {
        setPressed(true)
    }}
    onPressOut={() => {
        setPressed(false)
    }}
    onPress={() => {
        whateverYouWantYourPressableToDo()
    }}
    onLongPress={() => {}}
>

I just tested it on my own app, and it seems to be working as expected. When I tap a button my action triggers. when I press and hold for scrolling, I scroll and my pressable does nothing. Hope this is useful for you, or someone in the future :)

Answer 2

I spent my whole day on this problem but finally I found a solution for this problem.

import it from gesture handler either TouchableWithoutFeedback or touchableOpacity.

import { TouchableWithoutFeedback } from "react-native-gesture-handler";

it will definitely work and your problem will solve.