React Native - Pressables

Recently while exploring different react native components I came across a new component named Pressable. I thought of exploring what it is and how it differs from the existing touchable components and buttons. Here are some discoveries concerning it and how it can replace Touchable components.

What is Pressable?

With the release of React native 0.63, a new component was introduced namely Pressable. It is a core component wrapper that can detect various stages of press interactions on any of its defined children. It uses React native’s Pressability API to identify press interaction stages.

Following are a few props supported by Pressable:

• android_disableSound
• android_ripple
• children
• unstable_pressDelay
• delayLongPress
• disabled
• hitSlop
• onLongPress
• onPress
• onPressIn
• onPressOut
• pressRetentionOffset
• style
  

Why Pressable?

The Pressable component can be used in the replacement of different touchable components like TouchableWithoutFeedback, TouchableOpacity, TouchableNativeFeedback and TouchableHighlight. It can replace the functionality of all touchable components as it gets the pressed state as a prop in the style.

The implementation could be as follows:

function App(onPressFunction) {
  return (
    <View style={styles.screen}>
      <View style={styles.content}>
        <Pressable onPress={() => onPressFunction()} style={styles.button}>
          <Text style={styles.buttonText}>
            Pressable as TouchableWithoutFeedback
          </Text>
        </Pressable>

        <Pressable
          onPress={() => onPressFunction()}
          style={({ pressed }) => [
            styles.button,
            { opacity: pressed ? 0.7 : 1 },
          ]}
        >
          <Text style={styles.buttonText}>Pressable as TouchableOpacity</Text>
        </Pressable>

        <Pressable
          onPress={() => onPressFunction()}
          style={({ pressed }) => [
            styles.button,
            { backgroundColor: pressed ? "#65898D" : "#EF515A" },
          ]}
        >
          <Text style={styles.buttonText}>Pressable as TouchableHighlight</Text>
        </Pressable>
      </View>
    </View>
  );
}

Demo:

More about Pressable:

Pressable has many powerful props such as onPress, onPressIn, onPressOut, onLongPress, etc.

• As soon as the user starts pressing the component, the touch event is detected, and the onPressIn function is triggered.
• If the press lasts longer than 500 milliseconds, the onLongPress function is triggered. This delay time can be customized with the help of the delayLongPress prop.
• Once the user ends the press, the onPressOut  function is triggered.
• Finally, the onPress function is triggered.

All of these functions accept a callback function that receives a native event as a parameter.

Other available props:

• hitSlop that can be used to increase the touch area of the component.
• disabled which as the name suggests disables touch events.
• android_disableSound that can be used to enable/disable the native sound of the press on Android devices.

Conclusion:

In this way, Pressable can help reduce developer efforts by replacing the touchable components and buttons.

For more details, you can refer