Pressable

<Pressable onPress={onPressFunction}>
  <Text>I'm pressable!</Text>
</Pressable>

How it works

• onPressIn is called when a press is activated.
• onPressOut is called when the press gesture is deactivated.

1. The person will remove their finger, triggering onPressOut followed by onPress.
2. If the person leaves their finger longer than 370 milliseconds before removing it, onLongPress is triggered. (onPressOut will still fire when they remove their finger.)

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.

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';

export default function App() {
  const [timesPressed, setTimesPressed] = useState(0);

  let textLog = '';
  if (timesPressed > 1) {
    textLog = timesPressed + 'x onPress';
  } else if (timesPressed > 0) {
    textLog = 'onPress';
  }

  return (
    <View>
      <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({
  text: {
    fontSize: 16,
  },
  wrapperCustom: {
    borderRadius: 8,
    padding: 6,
  },
  logBox: {
    padding: 20,
    margin: 10,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: '#f0f0f0',
    backgroundColor: '#f9f9f9',
  },
});

Props

android_disableSound

Android

android_ripple

Android

children

delayLongPress

disabled

hitSlop

onLongPress

onPress

onPressIn

onPressOut

pressRetentionOffset

style

testOnly_pressed

Type Definitions

RippleConfig