ScrollView

const ScrollView: ForwardRefExoticComponent<ScrollViewProps & RefAttributes<ScrollViewHandle>>;

Scrollable container.

Supports three modes:

1. Array children (default) — all children rendered, overflow clipped. Yoga has every layout position, so follow-focus is pixel-perfect.
2. Virtualized array (virtualize prop) — only visible items mounted (sliding window). Good for huge lists where rendering everything would be too expensive.
3. Line virtualization — pass a render function + totalLines.

Auto-scrolls to keep the focused child visible when scrollToFocus is true (default).

Keyboard shortcuts (when the ScrollView or a child has focus):

Key	Action
Page Up / Page Down	Scroll one page
Ctrl+D / Ctrl+U	Half-page down / up
Ctrl+F / Ctrl+B	Full-page down / up

Examples

// Basic scrollable list — all children rendered, overflow clipped
<ScrollView style={{ height: 10, border: "round" }}>
  {items.map((item) => (
    <Text key={item.id}>{item.name}</Text>
  ))}
</ScrollView>

// Virtualized list — only visible items mounted
<ScrollView virtualize style={{ height: 10, border: "round" }}>
  {items.map((item) => (
    <Text key={item.id}>{item.name}</Text>
  ))}
</ScrollView>

// Line-based virtualization with render function
<ScrollView totalLines={100_000} style={{ height: 20 }}>
  {({ start, end }) =>
    Array.from({ length: end - start }, (_, i) => (
      <Text key={start + i}>Line {start + i}</Text>
    ))
  }
</ScrollView>

---

Properties

Property	Type	Description
children?	ReactNode | (range) => ReactNode	Children to render. Can also be a render function (range: VisibleRange) => ReactNode for line-based virtualization.
defaultScrollOffset?	number	Initial offset for uncontrolled mode
disableKeyboard?	boolean	Disable keyboard scrolling
estimatedItemHeight?	number	Estimated height per child in lines (default: 1). Only used in virtualized mode for initial scroll calculations before actual heights are measured.
focusable?	boolean	Make ScrollView itself focusable. Default: true. Set to false if you want scroll to follow child focus only.
focusedStyle?	Style	Style applied when ScrollView is focused
onScroll?	(offset) => void	Callback when scroll offset should change (controlled mode)
overscan?	number	Extra lines to render above/below viewport (default: 2)
scrollOffset?	number	Controlled scroll offset (rows from top)
scrollStep?	number	Lines to scroll per arrow key press (default: 1)
scrollToFocus?	boolean	Auto-scroll to focused element (default: true)
showScrollbar?	boolean	Show scrollbar when content is scrollable (default: true)
style?	Style	-
totalLines?	number	Total content height in lines (for render function mode). When set with a render function, enables line-based virtualization.
virtualize?	boolean	Enable sliding-window virtualization for array children. When true, only visible items (+ overscan) are mounted. When false (default), all children are rendered and clipped — like browser overflow scrolling. This gives Yoga full layout info so scrollIntoView / follow-focus positions are always accurate.

---

VisibleRange

Visible range passed to the render function in virtualized mode. Contains the start/end indices and viewport metadata.

Properties

Property	Type	Description
end	number	One past the last visible line index
scrollOffset	number	Current scroll offset
start	number	First visible line index (0-based)
viewportHeight	number	Viewport height in lines