Stage 2 · Lesson 4 of 10
Flexbox layout
Layout in uses , a set of rules for sharing space between children. It has a few defaults that differ from the web. flexDirection is , not row, and every View is a flex container.
justifyContent positions children along the main direction and alignItems across it. flex: 1 makes a child fill the remaining space, and gap adds space between children. Use position: 'absolute' for overlays such as a badge on an avatar.
Percentages work, but prefer flex so layouts adapt. Learn to predict a layout before running it, because most layout bugs are a missing flex: 1 on a parent.
Common trapcopying web and expecting row as the default direction, or grid layouts that do not exist.
A question to check yourself, an AI practice session and 2 cheat sheet entries come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- GuideFreeExpo Documentation
Expo
The Expo tutorial builds a small app you run on your own phone
- GuideFreeReact Documentation
Meta
"Describing the UI" and "Adding interactivity" cover the React you need