Styling with StyleSheet and Flexbox

A developer who tries to center a row of three buttons on a React Native screen using web instincts reaches for `display: flex` first, only to find every core component already defaults to a column-direction flex container — there is no `display: block` to opt out of, because Flexbox is not one layout option among several in React Native, it is the only layout system available. Getting comfortable with that single system, rather than treating it as CSS Flexbox with a slightly different default, is what turns layout from a source of daily confusion into a fast, predictable tool.

Without a real mental model of how `flexDirection`, `justifyContent`, `alignItems`, and `flex` actually interact, a developer resorts to trial-and-error — nudging a margin here, wrapping an extra `<View>` there — until a layout looks right on one screen size and then breaks silently on another, because the underlying cause was never actually understood, just papered over. This lesson builds that model directly, alongside the `StyleSheet` API that replaces CSS for expressing it.

Analogy🏏Cricket

🏏 Think of it like cricket: A young player who has only ever trained on matting wickets, where the ball behaves in a narrow, predictable band regardless of what's actually happening underneath, struggles badly the first time he plays on a genuine turf pitch, because turf has an actual underlying physical model — moisture, grass length, soil compaction — that determines exactly how a ball will behave, and a player who never learned that underlying model has no way to predict or adapt to it; every session is trial-and-error, nudging technique after the fact rather than understanding why the ball behaved the way it did. A player coached properly on turf instead learns the actual underlying model — how a length ball behaves differently on a dry, cracked surface versus a fresh, grassy one — and from that point on can predict, before the ball is even bowled, roughly how a given delivery on a given surface will behave, because the model, not memorized trial-and-error, is doing the predicting. Just as understanding turf's actual underlying physical model lets a batter predict behavior instead of reacting after the fact, understanding Flexbox's actual model — flexDirection, justifyContent, alignItems, flex — lets a developer predict a layout's result instead of nudging styles until something looks right by accident. Just as matting-only training leaves a player unable to adapt once conditions genuinely differ, memorized style snippets without the underlying model leave a developer unable to adapt once a layout's requirements genuinely differ from the exact example they copied. The insight is that understanding the underlying model, not accumulating memorized special cases, is what makes a skill transfer reliably to situations you haven't seen before.