Pressable Component in React Native

Pressable is React Native's most modern, flexible touch component – the recommended successor to the various older "Touchable*" components.

1. Description

Unlike TouchableOpacity/TouchableHighlight, Pressable allows style to be a FUNCTION that receives the current press state as an argument – this lets you fully customize the appearance during a press, instead of only having a fixed underlay color.

2. Short example

<Pressable
  style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}
  onPress={() => console.log('Pressed!')}
>
  <Text>Press</Text>
</Pressable>

3. Complete project

npx create-expo-app pressable-demo
cd pressable-demo

App.js

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

export default function App() {
  const [log, setLog] = useState([]);

  function record(event) {
    setLog((current) => [event, ...current].slice(0, 5));
  }

  return (
    <View style={styles.container}>
      <Pressable
        style={({ pressed }) => [
          styles.button,
          { backgroundColor: pressed ? '#1e40af' : '#2563eb' },
        ]}
        onPressIn={() => record('Pressed in (onPressIn)')}
        onPressOut={() => record('Pressed out (onPressOut)')}
        onLongPress={() => record('Long pressed (onLongPress)')}
        onPress={() => record('Full tap (onPress)')}
      >
        {({ pressed }) => (
          <Text style={styles.buttonText}>
            {pressed ? 'Being pressed...' : 'Press or long-press'}
          </Text>
        )}
      </Pressable>

      <View style={styles.log}>
        {log.map((entry, index) => (
          <Text key={index} style={styles.logLine}>{entry}</Text>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 80, alignItems: 'center' },
  button: { paddingVertical: 14, paddingHorizontal: 28, borderRadius: 8 },
  buttonText: { color: '#fff', fontWeight: '600' },
  log: { marginTop: 24, alignItems: 'flex-start' },
  logLine: { color: '#6b7280', marginBottom: 4 },
});

4. Explanation

style as a FUNCTION – receives {{ pressed }} as an argument and can return different styles based on it; children may also be a function, as shown here for the button text.
onPressIn/onPressOut – fire on TOUCH DOWN and RELEASE, regardless of whether it turns into a full tap.
onLongPress – fires after a configurable minimum hold time (default about 500ms).
onPress – only fires on a COMPLETE, short tap (press down AND release AGAIN inside the component).

5. Outputs

Ausgabe

A blue button "Press or long-press" that darkens while held down and changes its text to "Being pressed...". Below it, a log of the last five events accumulates, e.g. "Pressed in (onPressIn)", "Pressed out (onPressOut)", "Full tap (onPress)" – with a long hold, additionally "Long pressed (onLongPress)".

Tipp: Pressable is now the default choice recommended by React Native's own documentation for new projects – TouchableOpacity/TouchableHighlight remain available for compatibility, but are usually the second choice for new code.