Make TouchableOpacity not highlight element when starting to scroll [React Native]

Question

TouchableOpacity makes things touchable, or as React Native says:

A wrapper for making views respond properly to touches.

But using it inside a ScrollView or ListView results in highlighting when we (or at least I) do not want that.

These are three steps involved in scrolling down a ListView filled with elements:

Touch an element
Move finger up
Release finger

Touching the element immediately results in a highlight animation. But in this case, we just want to scroll. We do not want to do anything with that element, be it highlighting or opening a detail view etc.

This does not happen all the time but most of the times on my Android device.

What is a proper way of handling this?

Out of interest, what's the use-case for wrapping a scroll-view in a touchable highlight? — Tom Walters, Jun 03 '16 at 11:25
That's not the case. We are wrapping a `TouchableOpacity` element **inside** a `ScrollView`. — Maiko Kuppe, Jun 03 '16 at 12:06

score 39 · Accepted Answer · answered Jun 05 '16 at 13:30

39

A scroll gesture should cancel the TouchableOpacity touch responder, but if you think the TouchableOpacity highlight is triggered to early, you can try tweaking the delayPressIn property.

answered Jun 05 '16 at 13:30

oblador

2,954
19
15

Thank you. I did not consider the `TouchableWithoutFeedback` props. Now I set the `delayPressIn` to a very high number because I do not want that animation to appear when holding a button. It does not feel entirely right though. I think I am going to need a custom highlighting animation for tapping, holding and longPressing in the long run. – Maiko Kuppe Jun 06 '16 at 10:44
5

Thanks `delayPressIn` worked well, I set mine to `50` which seems appropriate for my swipe gesture. – Michael Nov 08 '17 at 17:30
Dude I love you so hard right now. I don't know why this prop. isn't documented. React-Native is a mess when it comes to documentation. Now I can stop using the buggy TouchableHighlight (which works really bad with borders and images) – Hirbod May 09 '19 at 18:30

Abhishek T. · Answer 2 · 2020-07-13T16:13:13.747

You can use delayPressIn={1000}, which will delay the animation until you press for 1 second.

delayPressIn property of <TouchableOpacity> delay in ms, from the start of the touch, before onPressIn is called.

Example to use :

<FlatList
  horizontal
  contentContainerStyle={{ paddingRight: 16 }}   // this set the padding to last item
  showsHorizontalScrollIndicator={false}         // hide the scroller
  data={results}
  keyExtractor={(result) => result.data.id}
  renderItem={({ item }) => {
    return (
      <TouchableOpacity
        delayPressIn={1000}         // delay animation for 1 second
        onPress={() => navigation.navigate('ResultsShow')}
      >
        <ResultsDetail result={item.data} />
      </TouchableOpacity>
    );
  }}
/>;

You can find more about this Here.

Make TouchableOpacity not highlight element when starting to scroll [React Native]

2 Answers2

Linked