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 thedelayLongPress
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