With the new React Native version, 0.63, a new ponent called Pressable has been added. How does Pressable differ from the existing TouchableOpacity, and when is it better to use one versus the other?

With the new React Native version, 0.63, a new ponent called Pressable has been added. How does Pressable differ from the existing TouchableOpacity, and when is it better to use one versus the other?

• javascript
• reactjs
• react-native

• You can read the Pressable Documentation to get a clear Idea. – TripleM Commented Jul 9, 2020 at 11:09
• Blog post with the announcement: reactnative.dev/blog/2020/07/06/version-0.63#pressable Note that it says "We expect that most people will build and share ponents utilizing Pressable under the hood instead of relying on the default experience of something like TouchableOpacity." – Albert Vila Calvo Commented Feb 18, 2021 at 10:36
• 1 One thing that I do want to point out for future readers of this post - there is a slight timing difference between the Pressable ponent and TouchableOpacity. In a project that I'm working on that is very timing sensitive, Pressable has slightly more delay between the onPressIn and onPressOut events than TouchableOpacity. It's not enough to cause an issue in most cases, but if you do need something that is more performant, it is worthwhile to do some testing between the two yourself. – Jon Commented Nov 30, 2021 at 0:30

3 Answers 3

Pressable was a new introduction to RN 0.63; prior to that, TouchableOpacity was the most monly used ponent to wrap a <Text> ponent or similar ponents.

Both their basic functionalities are same, to make a text/image clickable and user interactive.

But with Pressable you get to access a lot new props like:

HitRect (which is such a cool feature), according to docs:

Fingers are not the most precise instruments, and it is mon for users to accidentally activate the wrong element or miss the activation area. To help, Pressable has an optional HitRect you can use to define how far a touch can register away from the the wrapped element. Presses can start anywhere within a HitRect.

This is clearly a better alternative to what we used for hitslop , here it's more precise and you define the area. And it doesn't interfere with the child/other ponents z-index too.

So basically you get many of the features of a button, touchableOpacity, with cool new props. Check out the React Native Pressable docs.

NOTE: Also as other ments in this thread suggests, Pressable still doesn't have an animation attached with the onPress Event

Just wanted to add a note about one drawback of Pressable and a workaround.

The drawback is Pressable has no automatic feedback like its TouchableOpacity counterpart.

However, you can add your own custom feedback with Pressable's style prop, which es with a pressed state identifier:

<Pressable
  style={({ pressed }) => [
    { opacity: pressed ? 0.5 : 1.0 }
  ]}
  onPress={() => console.log('Pressed')}
>
 <View><Text>Press Me</Text></View>
</Pressable>

Here is a picture to clear your doubt.

How it works On an element wrapped by

Pressable

:

onPressIn is called when a press is activated. onPressOut is called when the press gesture is deactivated.

After pressing onPressIn, one of two things will happen:

1. The person will remove their finger, triggering onPressOut followed by onPress.
2. If the person leaves their finger longer than 370 milliseconds before removing it, onLongPress is triggered. (onPressOut will still fire when they remove their finger.)

Please refer to documentation for more details.