Width, height, and flex in React Native - UI Render Trace

Component - Width, height, and flex

This React Native component shows how width, height, and flex properties control the size and layout of boxes inside a container. It helps you understand how fixed sizes and flexible space sharing work together.

Widget Tree

View (container)
├─ View (box1)
├─ View (box2)
└─ View (box3)

The main container is a View holding three child Views (boxes). Each box has different width, height, and flex styles to show how they size and share space horizontally.

Render Trace - 4 Steps

Step 1: View (container)

Step 2: View (box1)

Step 3: View (box2)

Step 4: View (box3)

State Change - Re-render

Trigger:No state change in this static layout example

Before

Initial layout with fixed and flex sizes

→

After

No change

Re-renders:No re-render triggered

UI Quiz - 3 Questions

Which box has a fixed width regardless of container size?

A The red box (box1)

B The green box (box2)

C The blue box (box3)

D All boxes have flexible width

Key Insight

Using fixed width and height sets exact box sizes, while flex lets boxes share leftover space proportionally. Combining these helps create responsive layouts that adapt to screen size changes.