Button and Pressable in React Native - UI Render Trace

Component - Button and Pressable

This UI component demonstrates two ways to create clickable buttons in React Native: the built-in Button component and the more customizable Pressable component. Both respond to user taps but offer different styling and behavior options.

Widget Tree

View
├─ Button
└─ Pressable
   └─ Text

The root View holds two children: a Button and a Pressable. The Pressable contains a Text child that shows the label. Visually, the Button appears as a standard system button, and the Pressable looks like a text label that changes style when pressed.

Render Trace - 4 Steps

Step 1: View

Step 2: Button

Step 3: Pressable

Step 4: Text

State Change - Re-render

Trigger:User taps either the Button or the Pressable

Before

No feedback or action triggered

→

After

An alert or console log shows 'Button pressed!' and Pressable changes background color briefly

Re-renders:The entire component re-renders but only the Pressable's style changes visibly during press

UI Quiz - 3 Questions

Which component provides built-in styling and behavior for a clickable button?

A Pressable

B Button

C Text

D View

Key Insight

Using Button is quick and easy for standard clickable elements, but Pressable gives you full control over how the button looks and behaves when pressed, letting you create custom interactive experiences.