Comments

Learn the New Pressable Component in React Native

React Native recently released a new core component called Pressable in version 0.63. As the name suggests, this component can detect the different stages of press or touch interactions. Pressable could potentially be an alternative to older components like TouchableOpacity and TouchableWithoutFeedback.

Disclaimer: I have only played with this new component on sample projects, but haven’t yet integrated it into any of my production applications.

In this article, let’s look at what this new core component can do!

Why this new component?

We have been used to the touchable components in React Native, before the Pressable component was introduced.

Components like TouchableOpacity, TouchableWithoutFeedback, Buttonand so on are touchable components that we have used since React Native was released. But these components lack a high precision response to native touch events.

The Pressable component is very similar to the touchable components, but superior in terms of detecting various types of touch interactions across platforms. Therefore this is going be a great addition to the React Native framework.

Pressable Methods and Props

Pressable is a component that can detect the various stages of press interactions on its children elements. In the simple code snippet below we are wrapping the Text element with the Pressable component. Here press interactions that happen within Text component are handled by the parent Pressable component.

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

Let’s dive in to some of functions and props that Pressable component supports:

onPressIn()

This is method called as soon as a press event occurs.

onLongPress() – Hot and New!

This method is a useful new method that comes with Pressable. It is called after onPressIn() if the user engages with a long press/touch that lasts over 370 milliseconds. This value can be customized using the delayLongPress prop.

delayLongPress – Hot and New!

This prop is used to customize the delay time that is used to call the method onLongPress() after onPressIn(). The prop is basically a duration that is set in milliseconds.

onPressOut()

This method is called when the press/touch is released.

onPress()

This method is called right after onPressOut() method.

Android Specific Props

Pressable component also comes with some cool Android specific props. These won’t work on iOS devices.

android_ripple

This enables the Android ripple effect and allows configuring its properties.

android_disableSound

As the name suggest, when this prop is true, it does not play the Android system sound on press. This prop is of type Boolean.

Capturing Touches Outside Pressable Area

HitRect – Hot and New!

While using mobile apps, especially with smaller phones, the user may sometimes press slightly outside a UI element. React Native uses Pressable to provide a better UI experience in this regard. Users may accidentally click the wrong button, or press on a blank space near a button etc.. Hence, to overcome this Pressable comes with an optional HitRect. This can define an area outside the pressable area. It determines how far the user’s touch can move away from the wrapped UI element. The Pressable component will honor any presses within the HitRect as well.

This is a huge benefit for users with small screen sizes and the app will be smart enough to identify their presses correctly, even if their fingers slipped away from the element, as long as they are within the additional HitRect that is provided.

hitSlop()

This new method can set an additional distance outside of the element in which a press is detected. This is used to set the HitRect. This is useful sometimes when we want the user to have a slightly greater area than the element itself, to allow a press/touch, but the UI doesn’t need to display the UI for the element due to limited real estate.

PressRect – Hot and New!

To take this even further, the Pressable component allows presses to move beyond the element and the HitRect while maintaining the activation. To achieve that, we use the PressRect. This is used for scenarios when you are maybe sliding your finger slowly away from a button while you are pressing down. In events like that PressRect comes in handy.

pressRetentionOffset

This method is used to set the additional distance of a view in which a touch is considered a press before onPressOut is invoked.  This is used to set the PressRect. It takes in coordinates of type Rect.

Going Forward

Going forward, you can just use the Pressable component instead of the Touchable components. Pressable can basically do everything the touchable components could do and more. The hot and new features make this component far better and provides a seamless user experience. Make sure to check out the official Pressable documentation below to review the API and it also has some cool visual representations.

https://reactnative.dev/docs/pressable

If you are looking for a course that gets you started with React Native and teaches the fundamentals, checkout Mosh’s course linked below.

Ultimate React Native Course – Code With Mosh

I hope you enjoyed this article. See you again with more articles. If you liked this post, don’t forget to share it with your network. You can follow me on twitter @AdhithiRavi for more updates or if you have any questions.

Adhithi Ravichandran is a Software Consultant based in Kansas City. She is currently working on building apps with React, React Native and GraphQL. She is a Conference Speaker, Pluralsight Author, Blogger and Software Consultant. She is passionate about teaching and thrives to contribute to the tech community with her courses, blog posts and speaking engagements.
Tags: , , , ,

One response to “Learn the New Pressable Component in React Native”

  1. Ankit khaire says:

    I need help for the nested drawer navigators,Please help me.

Leave a Reply

Connect with Me
  • Categories
  • Popular Posts

    %d bloggers like this: