React Native — TouchableOpacity & TouchableHighlight hints
Since React Native 0.63 there is a Pressable component and you may like to use it. However, many things which were introduced in Pressable can be already used in Touchable components. Here are a couple of tips which can make it more useful for you.
hitSlop and pressRetentionOffset props
Pressable component has hitSlop and pressRetentionOffset. They can look nice and make you use Pressable instead of a component from a Touchable group. However, in fact all Touchable components inherit TouchableWithoutFeedback props, which also has both hitSlop and pressRetentionOffset. Thus, if you have already used TouchableOpacity or TouchableHighlight, you can just update it with these props.
delayPressIn prop
TouchableOpacity may work correctly for iOS right out of the box, but for Android it can be painful. Namely, on Android the opacity animation value decreases and increases correctly if you press on the element for a bit longer moment, but if you do it as fast as possible the animation can be partially or fully omitted. In such case it’s not clear for the user if there actually was any change. Also, it leads to the inconsistency of the buttons behaviour.
To avoid that, you can set a delayPressIn prop to 0 (in ms) or just to a smaller value to override the default behaviour. In this case the button will be handled as pressed as soon as it was tapped, so the animation will work always correctly.
