How does layout work in React Native compared with CSS on the web?

Summary

React Native uses Flexbox for all layout, but flexDirection defaults to column, there's no cascade or class names, and dimensions are unitless density-independent pixels.

Longer Answer

Styles are JavaScript objects (StyleSheet.create), applied per component; text styles don't inherit except within nested Text. flex: 1 fills available space. There is no CSS grid; percentages, gap, aspectRatio and absolute positioning cover most needs. Safe areas (notches, home indicators) must be handled explicitly, and dark mode via useColorScheme().

Key Points

• Flexbox only, column by default.
• Style objects, no cascade.
• Handle safe areas and dark mode yourself.

Deep dive: Mobile Apps with React Native and Expo: Layout and Styling