Styling in React Native: StyleSheet, and Flexbox as the ONLY layout system
CSS & Modern Styling's own domain taught the cascade, specificity, Grid, and a dozen layout tools beyond Flexbox alone. React Native takes almost none of that with it — no cascade, no stylesheets in the CSS sense, no Grid — and understanding exactly what's missing is more useful than assuming "it's basically CSS."
Intermediate
3 min read
StyleSheet: object-based styles, not a parsed stylesheet language
StyleSheet.create takes a plain JavaScript object of style properties and returns an optimized reference to it — style values look similar to CSS (backgroundColor, padding, flexDirection), but there's no actual CSS parser involved at all, no .css file, and critically, no cascade: a style applied to a View never inherits down to its children the way CSS properties like color or font-family do on the web. Every component's styling is explicit and local, every time.
Flexbox is the only layout system — there is no Grid
CSS & Modern Styling's own domain taught Flexbox and Grid as two genuinely different, complementary layout tools — Flexbox for one-dimensional layout, Grid for two-dimensional. React Native has only Flexbox — there's no Grid equivalent at all, and a layout that would naturally reach for CSS Grid on the web has to be recreated using nested Flexbox containers (rows of rows, essentially) instead. This is a real, sometimes genuinely awkward constraint worth knowing upfront, rather than discovering mid-project that the layout tool you'd normally reach for simply doesn't exist here.
One default flips: flexDirection defaults to column, not row
// Web CSS: flex-direction defaults to ROW// React Native: flexDirection defaults to COLUMN<View style={{ flexDirection: "column" }}> {/* this IS the default */}
This single default difference trips up nearly everyone arriving from web CSS: a plain <View> with children stacks them vertically by default, where a plain flex container on the web stacks horizontally by default — a real, easy source of "why is everything stacking the wrong way" confusion for anyone assuming React Native's Flexbox behaves identically to the web's.
No pseudo-classes, no media queries — different tools for the same needs
CSS & Modern Styling's own domain covered :hover, :focus, and media queries as core responsive/interactive tools — React Native has no direct equivalent of either. Hover doesn't meaningfully exist on a touch device at all (there's no cursor to hover with); Pressable's onPressIn/onPressOut/pressed state (lesson 3's own territory) covers the interactive-feedback need instead. Responsive layout differences (tablet vs. phone, different screen sizes) are handled by reading Dimensions or useWindowDimensions() at runtime and branching in JavaScript — a programmatic equivalent of what a media query does declaratively in CSS, not a direct syntax equivalent.
Units: everything is density-independent, with no CSS unit ambiguity
CSS & Modern Styling's own units lesson covered px, rem, %, and vw/vh as genuinely different, purpose-specific units. React Native has exactly one numeric unit — a density-independent pixel, automatically scaled correctly for each device's actual screen density — removing an entire category of CSS-unit-choice decision, at the cost of losing some of the finer-grained control those different CSS units each provided for specific cases.