This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

ScrollView

A scrollable container that supports vertical or horizontal scrolling.

Android

iOS

Web

Included in Expo Go

A scrollable container, defaulting to vertical scrolling. Use direction="horizontal" for horizontal lists.

Native implementations

Platform	Backing component
Android	A Jetpack Compose `Column` or `Row` with the `verticalScroll` or `horizontalScroll` modifier. This implementation renders all children and is not a lazy container.
iOS	SwiftUI `ScrollView`.
Web	React Native `ScrollView`.

A vertical list of six items inside a scroll view

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Vertical scrolling

VerticalScrollViewExample.tsx

import { useColorScheme } from 'react-native';
import { Host, ScrollView, Column, Text } from '@expo/ui';

export default function VerticalScrollViewExample() {
  const colorScheme = useColorScheme();
  const ink = { color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' };

  return (
    <Host style={{ flex: 1 }}>
      <ScrollView>
        <Column spacing={8}>
          {Array.from({ length: 30 }).map((_, i) => (
            <Text key={i} textStyle={ink}>
              {`Row ${i + 1}`}
            </Text>
          ))}
        </Column>
      </ScrollView>
    </Host>
  );
}

Horizontal scrolling

HorizontalScrollViewExample.tsx

import { useColorScheme } from 'react-native';
import { Host, ScrollView, Row, Text } from '@expo/ui';

export default function HorizontalScrollViewExample() {
  const colorScheme = useColorScheme();
  const ink = { color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' };

  return (
    <Host matchContents={{ vertical: true }} style={{ width: '100%' }}>
      <ScrollView direction="horizontal">
        <Row spacing={12}>
          {Array.from({ length: 20 }).map((_, i) => (
            <Text key={i} textStyle={ink}>
              {`Item ${i + 1}`}
            </Text>
          ))}
        </Row>
      </ScrollView>
    </Host>
  );
}

API

import { ScrollView } from '@expo/ui';

No API data file found, sorry!