Row & Column

React Native gives every box flexShrink: 0, the opposite of the web's flex default, so a Row child sized by a long sentence keeps that sentence's full single-line width and spills past the row's edge, where the nearest clipping ancestor cuts it mid-word. shrink hands the row's width back to the text: the child gives way and the copy wraps. Reach for it on the copy in a heading-beside-actions row, or any Row child whose width should follow the row rather than its own longest line. It is not fill: fill also zeroes the flex basis, so in a wrap row every child then fits on one line and the actions stop wrapping below the copy.

stacks renders the Row as a Column when the row's own container is at or below stackBreakpoint (default sm = 640): container-measured, so it stacks inside a narrow desktop column too, and the same gap, distribution, alignment, and padding props apply to the new axes. Children keep their own sizing, which makes stacks the tool for content-sized rows (a toolbar, a label beside its actions); equal-width tiles that should renumber columns belong to Grid. A Column never needs the inverse: a Column that must become a Row is a Row that stacks.

A direct child's span is its width in twelfths of the Row, Bootstrap's col-n: span={6} is half, span={4} a third, span={8} two thirds. The Row measures its own width and hands each spanning child a px cell with the gaps accounted for, so two span={6} children and the gap between them fill the row exactly, and spans past twelve wrap onto the next line. Fill components inside a span (a field, a card) fill the cell.

stacks and spans compose: below the breakpoint the Row becomes a Column and every child is full width, the col-12 col-md-6 idiom without a second prop. Crossing the breakpoint changes the layout only: every child stays mounted, so a field keeps its text and focus when a window is resized across it or a phone switches from the server's desktop layout after hydration. This is why a two-pane screen is a Row stacks of spans rather than a Row on one side of a useFormFactor() branch and a Column on the other, which remounts everything inside.

Container

Child