TouchableOpacity and TouchableHighlight in React Native - UI Render Trace

Component - TouchableOpacity and TouchableHighlight

This UI component demonstrates two common React Native touchable elements: TouchableOpacity and TouchableHighlight. They provide visual feedback when users tap buttons, improving the app's interactivity and user experience.

Widget Tree

View
├── TouchableOpacity
│   └── Text
└── TouchableHighlight
    └── Text

The root View contains two touchable components stacked vertically. Each touchable wraps a Text component showing the button label. TouchableOpacity changes the button's transparency on press, while TouchableHighlight changes the background color.

Render Trace - 5 Steps

Step 1: View

Step 2: TouchableOpacity

Step 3: Text (inside TouchableOpacity)

Step 4: TouchableHighlight

Step 5: Text (inside TouchableHighlight)

State Change - Re-render

Trigger:User taps the TouchableOpacity button

Before

TouchableOpacity button is fully opaque (opacity 1.0)

→

After

TouchableOpacity button opacity changes to 0.6 while pressed

Re-renders:TouchableOpacity component and its child Text re-render to show opacity change

UI Quiz - 3 Questions

What visual effect does TouchableOpacity provide when pressed?

A The button fades by changing its opacity

B The button changes background color

C The button shows a border

D The button text changes color

Key Insight

TouchableOpacity and TouchableHighlight are simple ways to give users clear feedback when they tap buttons. TouchableOpacity fades the button by lowering opacity, while TouchableHighlight changes the background color. Using these improves the app's feel and helps users know their taps are recognized.