ScrollView

A scrollable container for content larger than its bounds: vertical by default, horizontal for a row.
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.
iOS
Android
Web
tsx
<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>

Do & Don’t

Bounded height

Don’t
Deploy started
Dependencies restored from cache
Tests passed
Image pushed to the registry
Rollout reached half the fleet
Rollout complete
Leave the height to the content; an unbounded ScrollView grows to fit all of it, so nothing scrolls and the page grows instead.
Do
Deploy started
Dependencies restored from cache
Tests passed
Image pushed to the registry
Rollout reached half the fleet
Rollout complete
Give the ScrollView a bounded height, its own or its parent's; the content past that edge scrolls inside it.
← Row & Column
Select →