First React Native app - UI Render Trace

Component - First React Native app

This is the simplest React Native app that shows a greeting message and a button. When you tap the button, the message changes. It teaches how to create a basic app with text and interaction.

Widget Tree

App (Functional Component)
└── View (container)
    ├── Text (greeting message)
    └── Button (pressable button)

The root is the App functional component. Inside it, a View acts as a container holding two children: a Text component that displays a greeting message, and a Button component that the user can tap to change the message.

Render Trace - 4 Steps

Step 1: App

Step 2: View

Step 3: Text

Step 4: Button

State Change - Re-render

Trigger:User taps the 'Press me' button

Before

message = 'Hello, React Native!'

→

After

message = 'You pressed the button!'

Re-renders:App component and its children (View, Text, Button) re-render to show updated message

UI Quiz - 3 Questions

What happens when you tap the button in this app?

A Nothing happens

B The app closes

C The greeting message changes to a new text

D The button disappears

Key Insight

In React Native, the View component acts like a container to arrange other components. Using useState lets you create interactive apps by updating what the user sees when they tap buttons or perform actions.