Custom components in React Native - UI Render Trace

Component - Custom components

This UI shows how to create and use a custom component in React Native. The custom component is a simple button that displays a label and triggers an action when pressed.

Widget Tree

App
├── View (container)
│   ├── CustomButton
│   │   └── Pressable
│   │       └── Text
│   └── Text (status message)

The root App component contains a View as the main container. Inside the View, there is a CustomButton component, which itself uses a Pressable wrapping a Text label. Below the button, a Text component shows a status message.

Render Trace - 6 Steps

Step 1: App

Step 2: View (container)

Step 3: CustomButton

Step 4: Pressable

Step 5: Text (button label)

Step 6: Text (status message)

State Change - Re-render

Trigger:User taps the CustomButton

Before

statusMessage = 'Button not pressed'

→

After

statusMessage = 'Button pressed!'

Re-renders:App component and its children re-render to update the status message text

UI Quiz - 3 Questions

What is the role of the CustomButton component?

A It creates a reusable button with a label and tap action.

B It displays a static text message only.

C It manages the app's navigation between screens.

D It styles the entire app background.

Key Insight

Creating custom components helps keep your code organized and reusable. In React Native, wrapping a Text inside a Pressable lets you build buttons that respond to taps with visual feedback and actions. This approach makes your UI easier to maintain and extend.