Why Use the Pressable Component Over the Touchable Components

Way back in v0.63 of React Native the Pressable component was introduced.

But we've still got all the Touchable components (TouchableOpacity, TouchableHighlight, TouchableNativeFeedback, TouchableWithoutFeedback)...

So, which do you choose and why?

tl;dr

The preferred and suggested component, per React Native, is the Pressable component (and by extension the Pressability API).

Why Pressable Was Introduced

React Native apps are fantastic - allowing you to build apps for multiple platforms that perform like a fully native app.

BUT they often have "tells" that they're built with React Native.

From the announcement post for React Native v0.63: "However, because they include built-in styles and effects that don’t match the platform interaction, users can tell when experiences are written with React Native."

So, while the Touchable components are great and easy to use they're often not the right tool for the job.

When Should You Use the Pressable Component?

Well, basically always. It's the suggested way to handle user interactions within your app.

The Pressable component itself has a very familiar API to the Touchable components you may be familiar with while allowing for extensibility that the Touchable* components don't.

This allows you to create buttons/interactions that merge your intended UI/UX while also following the design guidelines for the platform.

When Should You Use Touchable Components?

Basically, never. Kind of.

Under their hood, the Touchable* components use the Pressability API for their implementation so they're fully supported but they still have the drawbacks outlined above.

That means you don't need to worry about ripping all the Touchable's out of your app and replacing them.

So, in conclusion, the next time you need to handle user interaction reach for Pressable over Touchable - it does everything you know and love but better.

Also published here.