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.

Answer 1

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.

Answer 2

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.