Pressable vs. TouchableOpacity in React Native: Making the Right Choice

Photo by Lautaro Andreani on Unsplash

I started working with React Native a while ago and follow this roadmap. One of the titles I encountered was Pressable, but I already knew about TouchableOpacity and used it. But what wasPressable?

And then I decided to write this article. In the React Native ecosystem, two components stand out for managing touch events: Pressable and TouchableOpacity. While both serve similar purposes, understanding their nuances can significantly impact our app's user experience.

The New Kid on the Block: Pressable

Introduced in React Native 0.63, Pressable represents a modern approach to handling touch interactions. Think of it as the Swiss Army knife of touch handlers – versatile, powerful, and adaptable to various scenarios.

<Pressable
  onPress={() =>
    navigation.navigate(routePage, { itemId: navigation.getParam(itemId) })
  }
  style={({ pressed }) => [
    {
      transform: [{ scale: pressed ? 0.95 : 1.1 }],
      borderRadius: 8,
      padding: 8,
      elevation: pressed ? 0 : 2,
      shadowColor: "#000",
      shadowOffset: {
        width: 0,
        height: 2,
      },
      shadowOpacity: pressed ? 0 : 0.15,
      shadowRadius: 3,
    },
    styles.wrapperCustom,
  ]}
>
  <Feather style={styles.iconPlus} name={iconName} />…