Make TouchableOpacity not highlight element when starting to scroll [React Native]
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.