This article examines the differences between Pressable and TouchableOpacity, two components in React Native that enable user interaction with text and images.

Pressable was introduced as an alternative to TouchableOpacity in React Native 0.63, offering enhanced touch activation through the HitRect prop, which helps prevent accidental activation of unintended elements. Unlike TouchableOpacity’s hitslop, Pressable’s HitRect provides more precise touch activation without interfering with the Z-index.

However, Pressable does not come with an animation attached to the onPress event, though opacity changes can be implemented using the onPressIn prop. Additionally, Pressable lacks automatic feedback, but custom feedback can be achieved through the style prop.

In contrast, TouchableOpacity provides more built-in feedback options, including the Android ripple effect through the android_ripple prop.

These components exhibit distinct behaviors and features, with Pressable focusing on precise touch activation and TouchableOpacity offering more feedback choices.

What is Pressable?

Pressable is a newer component introduced in React Native 0.63 as an alternative to TouchableOpacity. It provides additional features such as the HitRect prop for more precise touch activation and the ability to customize opacity changes in the onPressIn and onPressOut props.

The HitRect prop in Pressable helps prevent accidental activation of the wrong element or missing the activation area. This makes it a better alternative to the hitslop prop.

While TouchableOpacity automatically changes opacity on press, Pressable lacks this feature. However, developers can still customize opacity changes using the onPressIn and onPressOut props.

Additionally, Pressable does not have automatic feedback like TouchableOpacity. But custom feedback can be added using the style prop.

Overall, Pressable offers a more versatile and customizable approach to creating interactive elements compared to TouchableOpacity.

Features of Pressable

The features of Pressable include:

• The HitRect prop allows for more precise touch activation, preventing accidental activation of the wrong element or missing the activation area. This feature is considered a better alternative to hitslop, as it offers more accuracy and does not interfere with Z-index.

Pressable provides all the features of a button and TouchableOpacity, with additional props.

• However, unlike TouchableOpacity, Pressable does not have an automatic opacity change on press. Instead, opacity changes can be customized using the onPressIn and onPressOut props.

• Additionally, Pressable does not have built-in automatic feedback like TouchableOpacity, but custom feedback can be added using the style prop.

• The time for a long press in Pressable is set to 500ms.

• The onPressIn event is triggered when a press is activated, while onPressOut is triggered when the press gesture is deactivated.

Differences with TouchableOpacity

In terms of behavior and features, there are notable distinctions between Pressable and TouchableOpacity.

Pressable lacks the automatic opacity change on press, which is a prominent feature of TouchableOpacity. However, in Pressable, opacity changes can be customized using the onPressIn and onPressOut props.

Additionally, Pressable does not have automatic feedback like TouchableOpacity, but custom feedback can be added using the style prop.

On the other hand, TouchableOpacity offers the ability to achieve the Android ripple effect using the android_ripple prop.

Both components share similarities, such as the time for long press being 500ms and triggering onPressIn on press activation and onPressOut on press deactivation.

However, the absence of automatic opacity change and the option for custom feedback sets Pressable apart from TouchableOpacity.