? Pressable in React Native

✨ Quick Overview

Pressable is a core React Native component used to detect and respond to touch interactions. It gives more control than Button and replaces older components like TouchableOpacity.

? Key Concepts

• Detects press, long press, hover, and focus events
• Supports dynamic styling based on press state
• Better accessibility support
• Works across Android, iOS, and Web

? Syntax / Theory

The Pressable component wraps any view or text and responds to user interaction using event props like onPress.

// Import Pressable from react-native
import { Pressable, Text } from 'react-native';

<Pressable onPress={() => console.log("Pressed")}>
  <Text>Click Me</Text>
</Pressable>

? Code Example

// Complete Pressable example with styling
import { Pressable, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <Pressable
      style={({ pressed }) => [
        styles.button,
        pressed && styles.pressed
      ]}
      onPress={() => alert("Button Pressed")}
    >
      <Text style={styles.text}>Press Me</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    padding: 16,
    backgroundColor: '#2563eb',
    borderRadius: 8
  },
  pressed: {
    opacity: 0.7
  },
  text: {
    color: '#fff',
    textAlign: 'center'
  }
});

? Live Output / Explanation

When the user taps the button, the opacity changes and an alert appears. The pressed state allows dynamic styling during interaction.

? Interactive Playground

Test how Pressable events work below. Click (or hold) the button to see the state changes and events firing in real-time.

? Use Cases

• Custom buttons
• Cards with touch feedback
• List items
• Navigation elements