Pressable vs. Touchable in React Native
React Native 0.63 introduced the new component, Pressable.
What is the Pressable component?
A core component that detects different steps of press interactions on any of its children components.
What is the Touchable component?
A component that responds to touches on any of its children components.
Touchable components are:
Pressable and Touchable components look pretty similar. Their basic functionalities are the same for making a text/image clickable and user interaction. 🤔
Let’s compare them in detail.
Touchable Component:
1. It includes the styles and effects that do not meet the platform interactions.
2. It does not support high-quality interaction experience on different platforms.
Pressable Component:
1. It detects various types of interactions.
2. Its API provides direct access to the current state of interaction.
3. Its capabilities could be extended to include hover, blur, focus, and more.
Pressable contains a lot of new props and cool features such as:
- delayLongPress: Duration in milliseconds from onPressIn by the time onLongPress is called.
2. hitslop: Sets additional distance outside of the element in which a press can be detected.
3. onLongPress: Called if the time after onPressIn lasts longer than 500 milliseconds.
4. pressRetentionOffset: Additional distance outside of the view which a touch is considered a press, before onPressOut is triggered.
5. android_disableSound (Android): If true, doesn’t play Android system sound on press.
6. android_ripple (Android): Enables the Android ripple effect and configures its properties.
Now let’s see the Pressable component in an example:
Result:
Take away points:
Pressable is preferred to Touchable components according to React Native official docs. Pressable component offers a more extensive and future-proof way of handling the touch-based inputs.
The Pressable component is intended to replace the Touchable components.
It is time to start using the Pressable component for the upcoming apps. 😎
