React Native primitives

The foundations beneath Canvas, and when to use them.

Use the component for the job

Canvas builds on React Native primitives and re-exports the five most common hosts. Use the kit's semantic components for visible UI: Button for an action, Input for a field, Typography for text, and Card for a panel.
Arrange components with Row, Column, Container, and Grid. Their semantic spacing, alignment, and measure props keep the layout responsive and consistent. A missing capability belongs in the kit; do not recreate a control with a styled primitive.
tsx
<Container sm start>
<Column relaxed>
<Input label="Email" />
<Button primary>Continue</Button>
</Column>
</Container>

The primitive layer

Primitive
Purpose
View
The low-level layout host beneath Canvas containers and surfaces.
Text
The native text host beneath Typography and control labels.
Pressable
Press, hover, and focus behavior beneath interactive components.
TextInput
Native text entry beneath Input and Textarea.
ScrollView
A native scroll viewport with bounded content.
These hosts carry React Native behavior. Their styling APIs are implementation tools for kit internals and necessary infrastructure, not an alternative styling vocabulary for application UI. Image is a Canvas atom with semantic fit props.

A bounded scroll viewport

A scroll viewport needs a bounded height. Inside it, a Column owns spacing and Typography owns text. The viewport below is docs infrastructure for demonstrating scrolling.
Ada Lovelace
Grace Hopper
Kira Tanaka
Liang Bao
Marcus Allen
Noor Park
Rachel Chen
tsx
<ScrollView>
<Column pad snug>
{rows.map(name => <Typography key={name}>{name}</Typography>)}
</Column>
</ScrollView>

Native behavior

Need
Use
Text entry
Input or Textarea; extend the kit for a missing field capability.
Overlay
Dialog, Drawer, Popover, or Tooltip.
Responsive arrangement
Intrinsic sizing first, then measured containers. Viewport hooks belong to app chrome.
Large virtualized content
React Native FlatList or SectionList with Canvas components as cells.
Safe area and keyboard
The platform APIs in the application shell; Canvas controls inside.
React Native and react-native-svg are peer dependencies. Native navigation and behavior infrastructure can use the platform APIs directly while every visible control uses Canvas.
← Privacy
Theming →