What's the difference between Pressable and TouchableOpacity?

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

Pressable was a new introduction to RN 0.63; prior to that, TouchableOpacity was the most commonly used component to wrap a <Text> component or similar components.

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 common 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 components 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 comments in this thread suggests, Pressable still doesn't have an animation attached with the onPress Event