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} />
</Pressable>

What makes Pressable special is its ability to adapt. Like a chameleon, it can change its appearance based on different interaction states.

Do you want to change the background color when pressed? Easy. Need to adjust the scale when hovered? No problem. This level of granular control makes it perfect for creating rich, interactive user interfaces.

The Reliable Veteran: TouchableOpacity

TouchableOpacity has been around since the early days of React Native, and its simplicity is its strength. It does one thing well: providing visual feedback through opacity changes.

  <TouchableOpacity
    onPress={() =>
      navigation.navigate(routePage, { itemId: navigation.getParam(itemId) })
    }
  >
    <View>
      <Feather style={styles.iconPlus} name={iconName} />
    </View>
  </TouchableOpacity>