Row & Column

—

Gap scale (pick one; default `snug`). Maps to the shared spacing tokens.

Gap scale (pick one; default `snug`). Maps to the shared spacing tokens.

Gap scale (pick one; default `snug`). Maps to the shared spacing tokens.

Gap scale (pick one; default `snug`). Maps to the shared spacing tokens.

Gap scale (pick one; default `snug`). Maps to the shared spacing tokens.

Gap scale (pick one; default `snug`). Maps to the shared spacing tokens.

Main-axis distribution / justifyContent (pick one; default `start`).

Main-axis distribution / justifyContent (pick one; default `start`).

Main-axis distribution / justifyContent (pick one; default `start`).

Main-axis distribution / justifyContent (pick one; default `start`).

Main-axis distribution / justifyContent (pick one; default `start`).

Main-axis distribution / justifyContent (pick one; default `start`).

Cross-axis alignment / alignItems (pick one; default `stretch`, RN's native default).

Cross-axis alignment / alignItems (pick one; default `stretch`, RN's native default).

Cross-axis alignment / alignItems (pick one; default `stretch`, RN's native default).

Cross-axis alignment / alignItems (pick one; default `stretch`, RN's native default).

Cross-axis alignment / alignItems (pick one; default `stretch`, RN's native default).

Orthogonal modifiers (stack freely).

Orthogonal modifiers (stack freely).

Orthogonal modifiers (stack freely).

Let this box shrink below its own content width when the line runs out of room (`flexShrink: 1`), so a long text child wraps instead of overflowing. React Native gives every box `flexShrink: 0`, which is the opposite of the web's flex default: inside a Row, a Column holding a sentence keeps its MAX-CONTENT width and spills past the row's edge, where the nearest clipping ancestor cuts it mid-word. `shrink` is the opt-in that hands the row's width back to the text. Reach for it on the copy in a heading-beside-actions row, a label beside a control, any Row child whose width should follow the row rather than its own longest line. It is not `fill`. `fill` (flex: 1) 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; `shrink` leaves the basis at the content size, so the row still breaks where it did and only the over-wide child gives way. Redundant alongside `fill`, which already shrinks.

Responsive (Row only): render as a Column when the row's own CONTAINER is at or below `stackBreakpoint` (default `sm` = 640). Container-measured with a viewport seed for the first frame, so a Row inside a narrow desktop column stacks too, not just on phones. When stacked, the Row IS the Column with the same props: gap, justify, align, and padding apply to the new axes, the default `stretch` cross-axis makes children full width, and `wrap` is inert. Ignored (with a DEV warning) on Column: a Column that must become a Row is a Row that stacks.

The breakpoint at and below which `stacks` flips to a column (default `"sm"`). Only meaningful with `stacks` (DEV warns without it).

Width in twelfths of the parent Row (Bootstrap `.col-n`): `span={6}` is half the row, `span={4}` a third, `span={12}` the full width. The Row measures its own width and gives this box a px cell, gaps included in the arithmetic, so two `span={6}` children plus the gap between them fill the row exactly. Spans over twelve wrap onto the next line. A Row with `stacks` ignores spans once it has stacked (every child is then full width). Only meaningful on a direct child of a Row (DEV warns elsewhere); in a Column, a width is a Container step. A child without a span, `fill`, or `grow` hugs its content (`.col-auto`): a fill component inside it collapses, so give it one of those.

Indent the whole stack by one control gutter (24: a control box plus the row gap), so a nested option group lines up under its parent control's label instead of its box. For nesting checkboxes/radios under a "select all" parent.

Padding scale (pick one; omit for none).

Padding scale (pick one; omit for none).

Padding scale (pick one; omit for none).

E2E hook forwarded to the root element.

Layout containers are the exception to the no-sizing rule: for sizing and composition only (a `maxWidth` on a shell, a `flex` inside an app frame), never for styling or spacing. Gap, margin, padding, and flex layout come from the props above, and the codegen guardrail rejects those keys in `style`. Prefer a Container step or a `span` where one fits.