View

Atom
The layout primitive: a flex container that runs identically on iOS, Android, and the web. A View is a column by default.
src/atoms/view
View in Layout

Playground

Every control sets a real prop of ViewProps. The JSX below updates as you go.
View
View
Props
children
string
JSX · ViewProps
<View><Text>View</Text></View>

Variants

3 examples from src/atoms/view/view.md, each rendered live from its own JSX.
Column
<Container xs>
<Column snug>
<View style={{ height: 28, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15) }} />
<View style={{ height: 28, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15) }} />
<View style={{ height: 28, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15) }} />
</Column>
</Container>
Flex sizing
<Container xs>
<Row snug>
<View style={{ flex: 1, height: 32, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15) }} />
<View style={{ flex: 2, height: 32, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.3) }} />
</Row>
</Container>
A padded View
Padding
<View style={{ padding: 16, borderRadius: 10, backgroundColor: alpha(tokens.primary, 0.15) }}>
<Typography>A padded View</Typography>
</View>

Anatomy

View
View
1
View
2
Child view
Dimmed parts appear only in some states or variants.

Props

A React Native primitive, re-exported as is.
Accepts every React Native View prop unchanged. Canvas re-exports it so every component is built from the same primitive.

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
No role of its own in source; it reads as the content it renders.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
A padded View
Web
control 10 · field 10 · card 16 · Instrument Sans
A padded View
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
A padded View
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<View style={{ width: 40, height: 40, borderRadius: 8, backgroundColor: tokens.primary }} />
Reach for it directly only when no semantic primitive covers what you need: arrangement (direction, gap, alignment, padding) belongs to Row and Column, which are Views with that axis exposed as boolean props, and a bordered filled surface belongs to Card. Numbers are density-independent pixels.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--fm
--ft
--ion-ring
--ion-soft
--ion-tx
--ln
--sf2

Related components