Pressable - React Native

Powered by Mintlify

Auto-generate your docs

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

(event: GestureResponderEvent) => void

Called when a single tap gesture is detected.

(event: GestureResponderEvent) => void

Called when a touch is engaged before onPress.

(event: GestureResponderEvent) => void

Called when a touch is released before onPress.

(event: GestureResponderEvent) => void

Called when a long-tap gesture is detected.

(event: GestureResponderEvent) => void

Called when the press location moves.

(event: MouseEvent) => void

Called when the hover is activated to provide visual feedback.

(event: MouseEvent) => void

Called when the hover is deactivated to undo visual feedback.

boolean

Whether the press behavior is disabled.

Rect | number

Additional distance outside of this view in which a press is detected.

Rect | number

Additional distance outside of this view in which a touch is considered a press before onPressOut is triggered.

number

Duration (in milliseconds) from onPressIn before onLongPress is called.

number

Duration to wait after hover in before calling onHoverIn.

number

Duration to wait after hover out before calling onHoverOut.

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.

React.Node | (state: PressableStateCallbackType) => React.Node

Either children or a render prop that receives a boolean reflecting whether the component is currently pressed.

boolean

default:true

Whether a press gesture can be interrupted by a parent gesture such as a scroll event.

boolean

If true, doesn’t play system sound on touch.Platform: Android

object

Enables the Android ripple effect and configures its color.Platform: Android

string

Identifier used to find this view in tests.

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>