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