Button and Pressable in React Native

Introduction

Buttons let users tap to do something. Pressable is a flexible way to detect taps and other touch actions.

You want a simple clickable button to submit a form.

You want to detect when a user presses and holds on something.

You want to customize how a tap looks or behaves beyond a basic button.

You want to make an image or text respond to taps.

You want to add animations or style changes when a user presses.

Syntax

React Native

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

// Button usage
<Button title="Click me" onPress={() => Alert.alert('Pressed!')} />

// Pressable usage
<Pressable onPress={() => Alert.alert('Pressed!')}>
  <Text>Tap me</Text>
</Pressable>

Button is a simple component with built-in styles and text.

Pressable lets you wrap any content and detect press events with more control.

Examples

A simple button that shows an alert when tapped.

React Native

<Button title="Say Hello" onPress={() => Alert.alert('Hello!')} />

A pressable text that shows an alert when tapped.

React Native

<Pressable onPress={() => Alert.alert('Pressed!')}>
  <Text style={{color: 'blue'}}>Press me</Text>
</Pressable>

Pressable changes background color when pressed.

React Native

<Pressable
  onPress={() => Alert.alert('Pressed!')}
  style={({ pressed }) => [{
    backgroundColor: pressed ? 'lightgray' : 'white'
  }]}
>
  <Text>Press me</Text>
</Pressable>

Sample App

This app shows a basic Button and a Pressable. Tapping either shows an alert. The Pressable changes color when pressed.

React Native

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

export default function App() {
  return (
    <View style={styles.container}>
      <Button
        title="Click Button"
        onPress={() => Alert.alert('Button pressed!')}
      />
      <Pressable
        onPress={() => Alert.alert('Pressable pressed!')}
        style={({ pressed }) => [
          styles.pressable,
          { backgroundColor: pressed ? '#ddd' : '#eee' }
        ]}
        accessibilityLabel="Pressable button"
      >
        <Text style={styles.text}>Press Me</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  pressable: {
    marginTop: 20,
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5
  },
  text: {
    fontSize: 18,
    color: '#333'
  }
});

Important Notes

Button is easy to use but less customizable.

Pressable lets you style and animate presses but needs more setup.

Always add accessibility labels for better screen reader support.

Summary

Button is for simple clickable buttons with default styles.

Pressable is for custom touchable areas with flexible styling.

Use Pressable when you want to change appearance on press or wrap complex content.