How to Use Pressable in React Native: Simple Guide

Use the Pressable component in React Native to detect and respond to user touch interactions. Wrap your UI elements inside Pressable and provide an onPress callback to handle taps.

Syntax

The Pressable component wraps any child component to make it respond to touch events. You provide an onPress prop for tap handling and can use other props like style to change appearance on press.

Key parts:

• onPress: Function called when the user taps.
• style: Can be a function to change styles based on press state.
• Children: The UI elements inside Pressable.

javascript

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

export default function MyButton() {
  return (
    <Pressable onPress={() => alert('Pressed!')} style={({ pressed }) => [{
      backgroundColor: pressed ? 'lightgray' : 'white'
    }, { padding: 10, borderRadius: 5 }] }>
      <Text>Press Me</Text>
    </Pressable>
  );
}

Output

A button labeled 'Press Me' that changes background color when pressed and shows an alert on tap.

Example

This example shows a simple pressable button that changes color when pressed and shows an alert message when tapped.

javascript

import React from 'react';
import { Pressable, Text, View, Alert } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Pressable
        onPress={() => Alert.alert('Button pressed!')}
        style={({ pressed }) => [{
          backgroundColor: pressed ? '#ddd' : '#0a84ff',
          padding: 12,
          borderRadius: 8
        }]}
      >
        <Text style={{ color: 'white', fontWeight: 'bold' }}>Press Me</Text>
      </Pressable>
    </View>
  );
}

Output

A centered blue button labeled 'Press Me' that turns light gray while pressed and shows an alert 'Button pressed!' when tapped.

Common Pitfalls

Common mistakes when using Pressable include:

• Not providing an onPress handler, so taps do nothing.
• Using static styles only, missing visual feedback on press.
• Wrapping complex components without proper styling, causing touch areas to be too small or invisible.

Always test the press area and feedback on different devices.

javascript

/* Wrong: No onPress handler, no feedback */
<Pressable>
  <Text>Tap me</Text>
</Pressable>

/* Right: onPress and style with feedback */
<Pressable
  onPress={() => console.log('Tapped')}
  style={({ pressed }) => [{ backgroundColor: pressed ? 'gray' : 'white' }]}
>
  <Text>Tap me</Text>
</Pressable>

Quick Reference

• onPress: Required callback for tap events.
• style: Can be a function receiving { pressed } to change styles dynamically.
• onLongPress: Optional callback for long press.
• disabled: Boolean to disable press interaction.

Key Takeaways

Wrap UI elements in Pressable to handle taps in React Native.

Use the onPress prop to define what happens when pressed.

Use the style prop as a function to provide visual feedback on press.

Always test pressable areas for usability and accessibility.

Avoid missing onPress or static styles that give no feedback.