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

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?

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.

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 :

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

You can find more about this Here.

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   Directing the user to a child state when they are transitioning to its parent state using UI-Router

Similar Posts