Button and Pressable in React Native - Deep Dive

Overview - Button and Pressable

What is it?

In React Native, Button and Pressable are components used to create interactive touch elements. Button is a simple, ready-to-use component that shows a clickable button with a label. Pressable is a more flexible component that lets you customize how the button looks and behaves when pressed. Both help users interact with the app by tapping on the screen.

Why it matters

Buttons and Pressables let users control the app by tapping, which is how most mobile apps work. Without these, users couldn't easily trigger actions like submitting a form or opening a menu. Using Button and Pressable correctly makes apps feel natural and responsive, improving user experience and satisfaction.

Where it fits

Before learning Button and Pressable, you should understand basic React Native components and how to display text and views. After mastering these, you can learn about handling gestures, animations, and building custom interactive components.

Mental Model

Core Idea

Button and Pressable are touchable components that let users tap to trigger actions, with Button offering simplicity and Pressable offering full control over appearance and behavior.

Think of it like...

Think of Button as a ready-made light switch on the wall—simple and easy to use. Pressable is like a customizable control panel where you can design how the buttons look and respond when pressed.

┌───────────────┐       ┌───────────────┐
│    Button     │──────▶│ Simple touch  │
│ (pre-styled)  │       │ triggers action│
└───────────────┘       └───────────────┘
         │                      ▲
         ▼                      │
┌───────────────┐       ┌───────────────┐
│   Pressable   │──────▶│ Customizable  │
│ (flexible)    │       │ touch behavior│
└───────────────┘       └───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Basic Button Component

Concept: Introduce the Button component as a simple way to add clickable buttons with labels.

In React Native, you can add a Button by importing it and using it with a title and an action. For example: import { Button } from 'react-native';

Result

A simple button appears on screen with the label 'Click me'. When tapped, an alert pops up saying 'Pressed!'.

Understanding Button gives you a quick way to add interactive elements without worrying about styling or touch behavior.

2

Foundation

Introducing Pressable for Custom Interaction

Concept: Show how Pressable lets you customize the button's look and behavior on press.

Pressable is a component that detects press interactions and lets you change styles or run code. Example: import { Pressable, Text } from 'react-native'; alert('Pressed!')} style={({ pressed }) => ({ backgroundColor: pressed ? 'gray' : 'white' })}> Tap me This changes background color when pressed and shows an alert.

Result

A text 'Tap me' appears with a white background. When pressed, the background turns gray and an alert shows.

Knowing Pressable lets you create buttons that respond visually and functionally to user touches in any way you want.

3

Intermediate

Comparing Button and Pressable Usage

🤔Before reading on: do you think Button or Pressable offers more styling options? Commit to your answer.

Concept: Explain the differences in flexibility and use cases between Button and Pressable.

Button is easy to use but limited: you can only change the label and basic colors. Pressable requires more code but lets you fully control styles, animations, and nested content. Use Button for quick buttons and Pressable when you want custom looks or complex interactions.

Result

Learners understand when to pick Button for simplicity and when to use Pressable for customization.

Knowing the trade-off between simplicity and flexibility helps you choose the right component for your app's needs.

4

Intermediate

Handling Press States with Pressable

🤔Before reading on: do you think Pressable can detect when a user is pressing down, releasing, or long pressing? Commit to your answer.

Concept: Teach how Pressable provides callbacks and style changes for different press states.

Pressable supports callbacks like onPressIn, onPressOut, and onLongPress. You can also style based on the pressed state: console.log('Pressed in')} onPressOut={() => console.log('Pressed out')} onLongPress={() => console.log('Long press')} style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })} > Press me This logs events and changes opacity when pressed.

Result

The button visually changes opacity when pressed, and console logs show press events.

Understanding press states lets you create responsive buttons that give clear feedback to users.

5

Intermediate

Styling Buttons with Pressable

Concept: Show how to use Pressable's style prop as a function to change styles dynamically.

Pressable's style prop can be a function receiving an object with pressed boolean. Use it to change colors, scale, or other styles: ({ backgroundColor: pressed ? 'blue' : 'lightblue', padding: 10, borderRadius: 5 })} > Styled Button This changes background color when pressed.

Result

A button with rounded corners and color changes on press appears.

Dynamic styling based on press state improves user experience by making buttons feel alive and interactive.

6

Advanced

Building Custom Buttons with Pressable

🤔Before reading on: do you think you can use Pressable to create buttons with icons, animations, and complex layouts? Commit to your answer.

Concept: Demonstrate how Pressable can wrap any content, enabling fully custom buttons.

Because Pressable can contain any children, you can build buttons with icons, text, and animations: alert('Custom button pressed')} style={({ pressed }) => ({ flexDirection: 'row', alignItems: 'center', backgroundColor: pressed ? '#ddd' : '#eee', padding: 10, borderRadius: 8 })} > Favorite This creates a button with an icon and label that changes color when pressed.

Result

A button with a star icon and text appears, changing background color on press and showing an alert when tapped.

Knowing Pressable's flexibility unlocks the ability to create any button design or interaction you imagine.

7

Expert

Performance and Accessibility with Button and Pressable

🤔Before reading on: do you think Button automatically handles accessibility better than Pressable? Commit to your answer.

Concept: Explain how accessibility and performance differ between Button and Pressable and how to improve them.

Button comes with built-in accessibility roles and keyboard support. Pressable requires you to add accessibility props like accessibilityRole='button' and accessibilityLabel. For performance, avoid heavy re-renders inside Pressable's style function. Use memoization or static styles when possible to keep UI smooth.

Result

Learners understand how to make custom buttons accessible and performant.

Knowing accessibility and performance details ensures your buttons work well for all users and devices.

Under the Hood

Button is a high-level component that wraps native platform buttons, providing default styles and accessibility. Pressable is a low-level component that listens to touch events and exposes press states, letting you control rendering and behavior dynamically. Pressable uses React Native's gesture responder system to detect touches and updates its state to trigger style and event changes.

Why designed this way?

Button was designed for quick, consistent buttons with minimal code, matching native platform look and feel. Pressable was introduced to give developers full control over touch interactions and styles, enabling custom designs and complex behaviors that Button cannot support.

┌───────────────┐
│   Button      │
│ (native wrap) │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Native Button │
│  (iOS/Android)│
└───────────────┘


┌───────────────┐
│  Pressable    │
│ (touch events)│
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Gesture System│
│ (touch logic) │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does Button allow full custom styling like Pressable? Commit yes or no.

Common Belief: Button can be styled fully like any other component.

Reality: Button has limited styling options and cannot be customized deeply; Pressable is needed for full control.

Why it matters: Trying to style Button beyond its limits leads to frustration and inconsistent UI.

Quick: Does Pressable automatically handle accessibility roles like Button? Commit yes or no.

Common Belief: Pressable automatically provides accessibility features like Button does.

Reality: Pressable requires manual accessibility props to be accessible to screen readers and assistive tech.

Why it matters: Missing accessibility props on Pressable can make your app unusable for people relying on assistive devices.

Quick: Can you nest complex layouts inside Button? Commit yes or no.

Common Belief: Button can contain icons, images, and multiple elements inside it.

Reality: Button only accepts a text label; for complex layouts, Pressable must be used.

Why it matters: Misusing Button for complex content causes errors or broken UI.

Quick: Does using Pressable always improve performance over Button? Commit yes or no.

Common Belief: Pressable is always more performant than Button because it is simpler.

Reality: Pressable can cause performance issues if styles or callbacks are not optimized, unlike Button which is optimized internally.

Why it matters: Ignoring performance best practices with Pressable can slow down your app.

Expert Zone

1

Pressable's style prop as a function runs on every render and press state change, so heavy computations inside it can hurt performance.

2

Button uses native platform buttons under the hood, so its appearance and behavior vary between iOS and Android, which can be a pro or con depending on your design goals.

3

Accessibility on Pressable requires careful addition of roles, hints, and labels to match native button behavior, which is automatic in Button.

When NOT to use

Avoid using Button when you need custom layouts, animations, or complex press feedback; use Pressable instead. Avoid Pressable if you want quick, consistent buttons with minimal code and default platform styling.

Production Patterns

In production apps, Button is often used for simple actions like form submission. Pressable is used for custom-designed buttons with icons, animations, or complex gestures. Developers combine Pressable with Animated API for smooth press animations and with accessibility props for inclusive design.

Connections

Gesture Handling

Pressable builds on gesture handling concepts by exposing press states and events.

Understanding gesture handling helps you use Pressable effectively to respond to user touches beyond simple taps.

Accessibility in Mobile Apps

Button and Pressable relate to accessibility by providing or requiring accessibility roles and labels.

Knowing accessibility principles ensures your interactive components work for all users, including those with disabilities.

User Interface Design

Button and Pressable are fundamental UI elements that embody design principles like feedback and affordance.

Grasping UI design helps you create buttons that look clickable and respond clearly to user actions.

Common Pitfalls

#1 Trying to style Button with complex layouts or nested elements.

Wrong approach:

Correct approach:

{}}>

Star

Root cause:

Button only accepts a title prop as text, not children, so nesting elements inside it is invalid.

#2 Not adding accessibility props to Pressable, making it invisible to screen readers.

Wrong approach:

{}}>
Tap me

Correct approach:

{}} accessibilityRole='button' accessibilityLabel='Tap me button'>
Tap me

Root cause:

Pressable does not automatically set accessibility roles, so developers must add them manually.

#3 Using heavy computations inside Pressable's style function causing slow UI.

Wrong approach:

{
const complexStyle = expensiveCalculation();
return { backgroundColor: pressed ? complexStyle.color : 'white' };
}}>
Press me

Correct approach:

const cachedStyle = expensiveCalculation();
({ backgroundColor: pressed ? cachedStyle.color : 'white' })}>
Press me

Root cause:

Style functions run often; expensive calculations inside cause performance issues.

Key Takeaways

Button is a simple, ready-made component for basic clickable buttons with limited styling.

Pressable offers full control over touch behavior and appearance, enabling custom interactive elements.

Choosing between Button and Pressable depends on your need for simplicity versus customization.

Accessibility is automatic with Button but must be manually added to Pressable for inclusive apps.

Optimizing Pressable's style and event handlers is important for smooth app performance.