ScrollView

Learn scrollable areas with ScrollView.

What is ScrollView?

ScrollView creates a scrollable region. It lets you swipe up and down through content that does not fit on the phone screen. Everything you place inside the <ScrollView> tag scrolls together.

Basic usage is straightforward: open <ScrollView>, put <Text> or <View> children inside, then close with </ScrollView>. The default direction is vertical.

When the content fits the screen, ScrollView still works; you just do not need to swipe. Adding extra items is a safe way to test the behavior.

Vertical scroll by default

When you open a ScrollView, the content scrolls vertically. You do not set a height; ScrollView grows with its children and starts scrolling once content exceeds the screen.

The longer the content, the longer the scroll area. After dropping dozens of <Text> rows inside, you just swipe to see them all.

Unlike FlatList, ScrollView renders every child at once. It suits a small number of items; for thousands of rows FlatList is preferred. You saw that in the Lists group.

Exercise Write a three-row ScrollView

Write a <ScrollView> component with three <Text> children inside. Each Text shows a different row. Do not forget to export the App function.

Show example solution

function App() {
  return (
    <ScrollView>
      <Text>Row one</Text>
      <Text>Row two</Text>
      <Text>Row three</Text>
    </ScrollView>
  );
}
export default App;

Test yourself

What does ScrollView do?
- Changes the screen background color
- Makes overflowing content scrollable
- Makes text bold
- Sends a network request
Show answer

Makes overflowing content scrollable — it lets you swipe through content that does not fit.

Complete the import

import { View, Text, ____ } from 'react-native';

Show answer

import { View, Text, ScrollView } from 'react-native';

Match the ScrollView parts

ScrollView

Scroll region
vertical

Default direction
content

Scrolling children
finger

Gesture that starts scroll

Next lesson: horizontal

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies