Flexbox layout (flexDirection, justifyContent, alignItems) in React Native - UI Render Trace

Component - Flexbox layout (flexDirection, justifyContent, alignItems)

This React Native component uses Flexbox to arrange three colored boxes in a row. It controls the direction, spacing, and alignment of the boxes using flexDirection, justifyContent, and alignItems.

Widget Tree

View
├── View (Box 1)
├── View (Box 2)
└── View (Box 3)

The root View is the container with Flexbox styles. Inside it are three child Views representing colored boxes arranged horizontally.

Render Trace - 4 Steps

Step 1: View (container)

Step 2: View (Box 1)

Step 3: View (Box 2)

Step 4: View (Box 3)

State Change - Re-render

Trigger:Changing justifyContent from 'space-between' to 'center'

Before

Boxes spaced evenly with space between them horizontally.

→

After

Boxes grouped together in the center horizontally with no extra space between edges.

Re-renders:The container View and all child Views re-render to update layout spacing.

UI Quiz - 3 Questions

What does setting flexDirection to 'row' do in this layout?

A Arranges child boxes horizontally from left to right.

B Arranges child boxes vertically from top to bottom.

C Centers child boxes vertically.

D Spaces child boxes evenly.

Key Insight

Flexbox in React Native is a powerful way to control layout direction, spacing, and alignment. Using flexDirection sets the main axis direction, justifyContent controls spacing along that axis, and alignItems controls alignment perpendicular to it. This lets you build flexible, responsive layouts easily.