Container

The bounds provider. A Canvas component never dictates its own width: Container conforms to its parent (full width, no cap) by default, and a named step of the shared width scale (xxxs 192 through page 1280) caps and centers it, so the reading measure of a form, an article, or a card stack is a step you can name instead of a width invented at the call site.
A component fills the parent it is given (a field, a card, a table) or hugs its content (a button, a badge), and the nearest layout container provides the bounds. Container is the layout container whose job is a MEASURE, and by default the parent is the conformance factor. A cap is fluid: inside anything narrower than the step the container simply fills its parent, which is all a phone screen is. start pins a capped box to the leading edge instead of centering it, and padTight / pad / padLoose add horizontal gutters from Row and Column's own padding scale.
The step booleans and start are the kit's measure axis, and the fields, Field, Form, Button, and ButtonGroup carry it too: <Input sm start> says exactly what <Container sm start> around it says, a cap at the step and fluid below it. Reach for Container when the measure belongs to a group (a form, an article, a card stack) rather than to one component.
Sign in
iOS
Sign in
Android
Sign in
Web
tsx
<Container sm>
<Card>
<Typography medium>Sign in</Typography>
</Card>
</Container>

Props

Prop
Description
children
ReactNode
—
fluid
boolean
No cap, the default: the container spans its parent. Explicit `fluid` wins over every step when several are passed.
padTight
boolean
Gutters: horizontal padding (pick one; omit for none).
pad
boolean
Gutters: horizontal padding (pick one; omit for none).
padLoose
boolean
Gutters: horizontal padding (pick one; omit for none).
testID
string
E2E hook forwarded to the root element.
style
StyleProp<ViewStyle>
Layout containers are the exception to the no-sizing rule: for composition inside an app frame only (a `flex` in a screen shell), never a restyle hook.
xxxs
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xxs
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xs
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
sm
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
md
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
lg
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xl
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xxl
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xxxl
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
wide
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
wider
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
widest
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
page
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
start
boolean
Pin a capped component to the leading edge instead of centering it in its column.

Do & Don’t

Naming a measure

Don’t
Billing
Plan, invoices, and payment method.
Cap a raw View with a maxWidth of your own; the number is invented at the call site, drifts off the shared width scale, and pins the box to the start where a step would center it.
Do
Billing
Plan, invoices, and payment method.
Wrap the block in a Container step; the component inside fills it.
← Chip
Divider →