Pressable
Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
<Pressable onPress={onPressFunction}>
<Text>I'm pressable!</Text>
</Pressable>
How it works
On an element wrapped by Pressable
:
onPressIn
is called when a press is activated.onPressOut
is called when the press gesture is deactivated.
After pressing onPressIn
, one of two things will happen:
- The person will remove their finger, triggering
onPressOut
followed byonPress
. - If the person leaves their finger longer than 500 milliseconds before removing it,
onLongPress
is triggered. (onPressOut
will still fire when they remove their finger.)
Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, Pressable
has an optional HitRect
you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a HitRect
.
PressRect
allows presses to move beyond the element and its HitRect
while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
HitRect
with hitSlop
and set PressRect
with pressRetentionOffset
.
Pressable
uses React Native's Pressability
API. For more information around the state machine flow of Pressability and how it works, check out the implementation for Pressability.
Example
import React, {useState} from 'react';
import {Pressable, StyleSheet, Text, View} from 'react-native';
const App = () => {
const [timesPressed, setTimesPressed] = useState(0);
let textLog = '';
if (timesPressed > 1) {
textLog = timesPressed + 'x onPress';
} else if (timesPressed > 0) {
textLog = 'onPress';
}
return (
<View style={styles.container}>
<Pressable
onPress={() => {
setTimesPressed(current => current + 1);
}}
style={({pressed}) => [
{
backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
},
styles.wrapperCustom,
]}>
{({pressed}) => (
<Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
)}
</Pressable>
<View style={styles.logBox}>
<Text testID="pressable_press_console">{textLog}</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
text: {
fontSize: 16,
},
wrapperCustom: {
borderRadius: 8,
padding: 6,
},
logBox: {
padding: 20,
margin: 10,
borderWidth: StyleSheet.hairlineWidth,
borderColor: '#f0f0f0',
backgroundColor: '#f9f9f9',
},
});
export default App;
Props
children
Either children or a function that receives a boolean reflecting whether the component is currently pressed.
Type |
---|
React Node |
unstable_pressDelay
Duration (in milliseconds) to wait after press down before calling onPressIn
.
Type |
---|
number |
delayLongPress
Duration (in milliseconds) from onPressIn
before onLongPress
is called.
Type | Default |
---|---|
number | 500 |
disabled
Whether the press behavior is disabled.
Type | Default |
---|---|
boolean | false |
hitSlop
Sets additional distance outside of element in which a press can be detected.
Type |
---|
Rect or number |
onHoverIn
Called when the hover is activated to provide visual feedback.
Type |
---|
({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void |
onHoverOut
Called when the hover is deactivated to undo visual feedback.
Type |
---|
({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void |
onLongPress
Called if the time after onPressIn
lasts longer than 500 milliseconds. This time period can be customized with delayLongPress
.
Type |
---|
({nativeEvent: [PressEvent](pressevent)}) => void |
onPress
Called after onPressOut
.
Type |
---|
({nativeEvent: [PressEvent](pressevent)}) => void |
onPressIn
Called immediately when a touch is engaged, before onPressOut
and onPress
.
Type |
---|
({nativeEvent: [PressEvent](pressevent)}) => void |
onPressOut
Called when a touch is released.
Type |
---|
({nativeEvent: [PressEvent](pressevent)}) => void |
pressRetentionOffset
Additional distance outside of this view in which a touch is considered a press before onPressOut
is triggered.
Type | Default |
---|---|
Rect or number | {bottom: 30, left: 20, right: 20, top: 20} |
style
Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
Type |
---|
View Style |
testOnly_pressed
Used only for documentation or testing (e.g. snapshot testing).
Type | Default |
---|---|
boolean | false |
alexaEntityType
alexaEntityType
represents the value for the type of object that needs to be considered by Alexa UIController Interface. This is an optional prop and specific to Alexa UIController Interface support, it maps to the entity.type
field from the Alexa UIController Interface (Alexa UIController API doc)
Type |
---|
enum('Thing', 'VideoObject', 'ItemList', 'SoftwareApplication') |
alexaExternalIds
This is an optional prop and specific to Alexa UIController Interface support, it maps to the entity.ExternalIds
field from the Alexa UIController Interface (Alexa UIController API doc)
entity.ExternalIds
are the identifiers for this entity unique within the scope of this endpoint. The entity.externalIds
field are opaque to Alexa and are only used to include in directives from Alexa. The identifiers reported in entity.externalIds
are required to be understood by the endpoint on all directive commands that accept an entity structure.
Type |
---|
object: {key: "string", value: "string"} |
ariaPosInSet
The value for ariaPosInSet
refers to the number of the element when the user can refer to the element by number, such as "Alexa, select number one."
This prop is required if the app wants to allow user to perform voice selection based on the number.
Note that providing the prop with a value does not result in the value being rendered automatically from the component, for a consistent user behavior, app needs to render the same ordinal value for the item.
Type |
---|
number |
aria-label
aria-label
is an accessibility prop. You can use it to specify the name of the item in voice selection, such as "Alexa, select Prime Video".
This prop is required if the app needs to allow the user to perform voice selection based on the name.
Note: Providing the prop with a value does not result in the value being rendered as the title of the component, the app must explictly render the same text value for the item.
Type |
---|
string |
ariaLabel
Deprecated. Use aria-label
instead.
The value for ariaLabel
refers to the name of the item, such as "Alexa, select Prime Video".
This prop is required if the app wants to allow user to perform voice selection based on the name.
Note: Providing the prop with a value does not result in the value being rendered as the title of the component, the app must explictly render the same text value for the item.
Type |
---|
string |
keplerAltLabels - Kepler Only
The value for keplerAltLabels
refers to the list of alternate names for the item.
Note: This property replaces keplerAtlLabels
. keplerAtlLabels
is deprecated and will be removed in a future release.
This prop is required if the app wants to allow user to perform voice selection on the same item with different names.
Type |
---|
Array of string |
Last updated: Sep 30, 2025