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

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.

Installation

Terminal

- npx 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 { Host, ScrollView, Column, Text } from '@expo/ui';

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

Horizontal scrolling

HorizontalScrollViewExample.tsx

import { Host, ScrollView, Row, Text } from '@expo/ui';

export default function HorizontalScrollViewExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ScrollView direction="horizontal">
        <Row spacing={12}>
          {Array.from({ length: 20 }).map((_, i) => (
            <Text key={i}>Item {i + 1}</Text>
          ))}
        </Row>
      </ScrollView>
    </Host>
  );
}

API

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

No API data file found, sorry!