ScrollView

Atom
A scrollable container for content larger than its bounds: vertical by default, horizontal for a row.
src/atoms/scroll-view
View in Layout

Playground

Every control sets a real prop of ScrollViewProps. The JSX below updates as you go.
1
2
3
4
5
6
7
8
9
10
Props
horizontal
boolean
JSX · ScrollViewProps
<ScrollView horizontal />

Variants

1 examples from src/atoms/scroll-view/scroll-view.md, each rendered live from its own JSX.
Horizontal
<ScrollView horizontal style={{ width: "100%", borderRadius: 10, borderWidth: 1, borderColor: tokens.border }} contentContainerStyle={{ padding: 12, gap: 12 }}>
<View style={{ width: 200, height: 60, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15) }} />
<View style={{ width: 200, height: 60, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15) }} />
<View style={{ width: 200, height: 60, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15) }} />
<View style={{ width: 200, height: 60, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15) }} />
<View style={{ width: 200, height: 60, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15) }} />
<View style={{ width: 200, height: 60, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15) }} />
</ScrollView>

Anatomy

1
2
3
4
5
6
7
8
9
10
1
Viewport
2
Content
Dimmed parts appear only in some states or variants.

Props

A React Native primitive, re-exported as is.
Accepts every React Native ScrollView 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.
From the docs
Unlike a plain View, a ScrollView lets its children exceed its size and scroll. Style the frame with style and the inner content with contentContainerStyle. In Chromium and Firefox a scroller with nothing focusable inside it is a keyboard stop of its own, so arrow keys can scroll it; the browser draws its focus ring in the theme's ring colour, 2 px off the frame, like every kit control.

Platform skins

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

Usage

<ScrollView style={{ height: 176, width: "100%", borderRadius: 10, borderWidth: 1, borderColor: tokens.border }} contentContainerStyle={{ padding: 12, gap: 12 }}>
<View style={{ height: 36, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15) }} />
<View style={{ height: 36, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15) }} />
<View style={{ height: 36, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15) }} />
<View style={{ height: 36, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15) }} />
<View style={{ height: 36, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15) }} />
</ScrollView>
Unlike a plain View, a ScrollView lets its children exceed its size and scroll. Style the frame with style and the inner content with contentContainerStyle. In Chromium and Firefox a scroller with nothing focusable inside it is a keyboard stop of its own, so arrow keys can scroll it; the browser draws its focus ring in the theme's ring colour, 2 px off the frame, like every kit control.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--bg2
--fd
--fm
--ft
--ln
--sf3
--tx3

Related components