How avoid to press button on scroll React native

user_14596502 0
Viewed 1105

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

react-native
3 Answers

The press is visible(button gets a bit transparent), however the onPress function is not called. Also try and use TouchableOpacity instead of Pressable and see if it works.

 render() {
    const time = [{id: 0}, {id: 0}, {id: 0}, {id: 0}, {id: 0}];
    return (
      <ScrollView style={{flex: 1, backgroundColor: 'red', marginTop: 50}}>
        {time.map((data, index) => {
          return (
            <TouchableOpacity
              style={{
                paddingVertical: 100,
                marginBottom: 20,
                backgroundColor: 'green',
              }}
              onPress={() => alert(`HEllo ${index}`)}>
              <Text>HEllo ${data.id}</Text>
            </TouchableOpacity>
          );
        })}
      </ScrollView>
    );
  }

I tried the above and the alert(HEllo ${index}) was never called. Also if you want to prevent the user from seeing any interaction of buttonPress, try using <TouchableWithutFeedback /> from react-native

user_157675620

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 :)

user_170998250

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.

user_147796760
Related