Pressable is a replacement for Touchable Components

Gapur Kassym

·

Follow

Published in

JavaScript in Plain English

·

3 min read

·

Sep 7, 2021

--

2

Listen

Share

Every React Native developer is familiar with Touchable components. As a React Native developer, you’ve probably visited the documentation for the Touchable components and may have seen the warning:

If you’re looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API.

What is Pressable component? Why should we use it instead of Touchable components?

Today I will try to cover and answer all the questions in this article. Let’s dive into together.

What Are Touchable Components?

First of all, We should know or explore “what are Touchable components?”. The touchable components capture touch gestures and provide feedback when the gesture is recognized. They have no default styles. But you can manipulate the styles and do whatever you want.

React Native provides four types of touch components:

• TouchableHighlight — you can use as a button or link on the web. The background of the view will be darkened when the user clicks on the button
• TouchableNativeFeedback — uses its own drawable state to display touch feedback on Android
• TouchableOpacity — uses for feedback by decreasing the opacity of the button, when user clicks
• TouchableWithoutFeedback — it handles the touch gesture without any feedback

What Is Pressable Component?

Pressable was introduced as a new core React Native component in 0.63. This component can detect different stages of press interaction on any of its defined children.

<Pressable onPress={onPressFunction}>
  <Text>I'm pressable!</Text>
</Pressable>

How it works:

• onPressIn — is activated, after pressing onPressIn → onPressOut — onPress
• onPressOut — is deactivated, if the person leaves the finger longer than 500 ms before removing it, onLongPress is triggered onPressIn → 500ms → onLongPress → onPressOut

When we work with a mobile app, we can accidentally click outside of the button area. Pressable component provides HitRect feature, that help us to define how far the user’s touch can move away from the button.

Also, Pressable component provides a new hot feature PressRect. It sets the distance of a view in which a touch is considered a press when we slide our finger slowly away from a button.

Why Should We Use It Instead of Touchable Components?

Pressable is all-in-one touchable components

Pressable component has all the features of Touchable components. Therefore, we can replace all TouchableOpacity, TouchableHighlight, TouchableNativeFeedback and TouchableWithoutFeedback with a single component.

Pressable is a more extensive and future-proof component

Touchable components use Mixin under the hood. In simple words, Mixin is a class which contains helper methods for other classes. But Facebook does not recommend using it because it could cause new problems in the future.

Pressable uses React Native's Pressability API. It is refactored Touchable Mixin to ES6 class without changing their inherent behaviors. That’s why it is a more extensive and future-proof component.

Using Pressable

Let’s implement all the Touchable components via Pressable.

Let’s demo Pressable example:

If you want to check all the code, here’s the link to Github.

Conclusion

Thanks for reading — I hope you found this piece useful. Happy coding!

Resources

More content at plainenglish.io