Skip to main content
Pressable is a core component wrapper that can detect various stages of press interactions on any of its defined children. It provides more flexibility and control than TouchableOpacity and TouchableHighlight, allowing you to customize the appearance and behavior of your pressable elements.

​
Example

import React, { useState } from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <Pressable
      onPress={() => console.log('Pressed!')}
      style={({ pressed }) => [
        styles.button,
        pressed && styles.pressed
      ]}
    >
      {({ pressed }) => (
        <Text style={styles.text}>
          {pressed ? 'Pressed!' : 'Press Me'}
        </Text>
      )}
    </Pressable>
  );
};

const styles = StyleSheet.create({
  button: {
    padding: 12,
    backgroundColor: '#2196F3',
    borderRadius: 4,
  },
  pressed: {
    opacity: 0.7,
  },
  text: {
    color: 'white',
    textAlign: 'center',
  },
});

export default App;

​
Props

​
onPress
(event: GestureResponderEvent) => void
Called when a single tap gesture is detected.
​
onPressIn
(event: GestureResponderEvent) => void
Called when a touch is engaged before onPress.
​
onPressOut
(event: GestureResponderEvent) => void
Called when a touch is released before onPress.
​
onLongPress
(event: GestureResponderEvent) => void
Called when a long-tap gesture is detected.
​
onPressMove
(event: GestureResponderEvent) => void
Called when the press location moves.
​
onHoverIn
(event: MouseEvent) => void
Called when the hover is activated to provide visual feedback.
​
onHoverOut
(event: MouseEvent) => void
Called when the hover is deactivated to undo visual feedback.
​
disabled
boolean
Whether the press behavior is disabled.
​
hitSlop
Rect | number
Additional distance outside of this view in which a press is detected.
​
pressRetentionOffset
Rect | number
Additional distance outside of this view in which a touch is considered a press before onPressOut is triggered.
​
delayLongPress
number
Duration (in milliseconds) from onPressIn before onLongPress is called.
​
delayHoverIn
number
Duration to wait after hover in before calling onHoverIn.
​
delayHoverOut
number
Duration to wait after hover out before calling onHoverOut.
​
style
ViewStyle | (state: PressableStateCallbackType) => ViewStyle
Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
​
children
React.Node | (state: PressableStateCallbackType) => React.Node
Either children or a render prop that receives a boolean reflecting whether the component is currently pressed.
​
cancelable
boolean
default:true
Whether a press gesture can be interrupted by a parent gesture such as a scroll event.
​
android_disableSound
boolean
If true, doesn’t play system sound on touch.Platform: Android
​
android_ripple
object
Enables the Android ripple effect and configures its color.Platform: Android
​
testID
string
Identifier used to find this view in tests.
​
unstable_pressDelay
number
Duration to wait after press down before calling onPressIn.

​
Usage with Functions

Pressable supports function children and style props that receive the pressed state: 
<Pressable
  style={({ pressed }) => [
    { backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white' }
  ]}
>
  {({ pressed }) => (
    <Text>{pressed ? 'Pressed!' : 'Press Me'}</Text>
  )}
</Pressable>

Build docs developers (and LLMs) love

Get started for freeTalk to us