5/1/2021 Pressable · React Native
React Native 🌞
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:
1. The person will remove their finger, triggering onPressOut followed by onPress .
2. 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.)
https://reactnative.dev/docs/pressable 1/9
5/1/2021 Pressable · React Native
onPressOut onPress
onPressIn
... !
500ms onLongPress onPressOut
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.
https://reactnative.dev/docs/pressable 2/9
5/1/2021 Pressable · React Native
<Button/>
HitRect
PressRect
set with pressRetentionOffset
set with hitSlop
You can set 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
https://reactnative.dev/docs/pressable 3/9
5/1/2021 Pressable · React Native
Pressable
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
]}
Props
android_disableSound Android
If true, doesn't play Android system sound on press.
TYPE REQUIRED DEFAULT
boolean No false
android_ripple Android
Enables the Android ripple effect and configures its properties.
TYPE REQUIRED
Ri l C fi
https://reactnative.dev/docs/pressable
N 4/9
5/1/2021 Pressable · React Native
RippleConfig No
TYPE REQUIRED
children
Either children or a function that receives a boolean reflecting whether the component is
currently pressed.
TYPE REQUIRED
React Node No
delayLongPress
Duration (in milliseconds) from onPressIn before onLongPress is called.
TYPE REQUIRED DEFAULT
number No 500
disabled
Whether the press behavior is disabled.
TYPE REQUIRED DEFAULT
boolean No false
hitSlop
Sets additional distance outside of element in which a press can be detected.
TYPE REQUIRED
Rect or number No
onLongPress
Called if the time after onPressIn lasts longer than 500 milliseconds. This time period
can be customized with delayLongPress .
https://reactnative.dev/docs/pressable 5/9
5/1/2021 Pressable · React Native
TYPE REQUIRED
PressEvent No
onPress
Called after onPressOut .
TYPE REQUIRED
PressEvent No
onPressIn
Called immediately when a touch is engaged, before onPressOut and onPress .
TYPE REQUIRED
PressEvent No
onPressOut
Called when a touch is released.
TYPE REQUIRED
PressEvent No
pressRetentionOffset
Additional distance outside of this view in which a touch is considered a press before
onPressOut is triggered.
TYPE REQUIRED DEFAULT
Rect or number No { bottom: 30, left: 20, right: 20, top: 20 }
https://reactnative.dev/docs/pressable 6/9
5/1/2021 Pressable · React Native
style
Either view styles or a function that receives a boolean reflecting whether the component
is currently pressed and returns view styles.
TYPE REQUIRED
ViewStyleProp No
testOnly_pressed
Used only for documentation or testing (e.g. snapshot testing).
TYPE REQUIRED DEFAULT
boolean No false
Type Definitions
RippleConfig
Ripple effect configuration for the android_ripple property.
TYPE
object
Properties:
NAME TYPE REQUIRED DESCRIPTION
color color No Defines the color of the ripple effect.
borderless boolean No Defines if ripple effect should not include border.
radius number No Defines the radius of the ripple effect.
Is this page useful?
https://reactnative.dev/docs/pressable 7/9
5/1/2021 Pressable · React Native
Edit this page
Last updated on 29/10/2020
Previous Next
« Modal RefreshControl »
How it works
Example
Props
android_disableSound
android_ripple
children
delayLongPress
disabled
hitSlop
onLongPress
onPress
onPressIn
onPressOut
pressRetentionOffset
style
testOnly_pressed
Type Definitions
RippleConfig
DOCS
Getting Started
Tutorial
Components and APIs
More Resources
COMMUNITY
The React Native Community
Who's using React Native?
https://reactnative.dev/docs/pressable 8/9
5/1/2021 Pressable · React Native
Ask Questions on Stack Overflow
Contributor Guide
DEV Community
FIND US
Blog
Twitter
GitHub
MORE
React
Privacy Policy
Terms of Service
Copyright © 2021 Facebook, Inc.
https://reactnative.dev/docs/pressable 9/9
