UI & layoutBeginner5h

Flexbox in RN.

Layout on mobile, where flexbox is the only game.

What is flexbox in React Native?

React Native lays everything out with flexbox — there is no grid, no floats, no absolute-by-default. Every View is a flex container. If you know web flexbox, this is familiar with a few mobile-specific defaults to relearn.

Why it matters

Layout is most of UI work, and on mobile flexbox is the entire toolkit. Fluency means you build screens quickly and they adapt across phone sizes. Fighting layout because you do not understand flex direction or alignment is a constant, avoidable time sink.

What to learn

  • Flex containers and flex items
  • flexDirection and the RN default of column
  • justifyContent and alignItems
  • flex for proportional sizing
  • Gaps, padding, and margin
  • Absolute positioning when you need it
  • Differences from web flexbox defaults

Common pitfall

Assuming the default flex direction is row like the web. In React Native it defaults to column, because screens are tall. Expecting items to sit side by side and getting them stacked vertically is the classic surprise. Set flexDirection: 'row' explicitly when you want a horizontal layout.

Resources

Primary (free):

Practice

Build a screen layout with flexbox: a header row with items at each end, a content area that grows to fill space with flex: 1, and a footer pinned at the bottom. Center something both horizontally and vertically. Done when the layout holds on different screen sizes without hardcoded heights.

Outcomes

  • Lay out screens with flex containers and items.
  • Remember that flexDirection defaults to column.
  • Align and distribute with justifyContent and alignItems.
  • Use flex for proportional, adaptive sizing.
Back to Mobile roadmap →