ScrollView
- React Native course
- Beginner
- Lesson 59/116
- 5 min
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.
Practice 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.
Starter code
import { ScrollView, Text } from 'react-native';
// write the component hereSample solution
function App() {
return (
<ScrollView>
<Text>Row one</Text>
<Text>Row two</Text>
<Text>Row three</Text>
</ScrollView>
);
}
export default App;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does ScrollView do?
- Changes the screen background color
- Makes overflowing content scrollable Correct answer
- Makes text bold
- Sends a network request
Explanation: it lets you swipe through content that does not fit.
2 Complete the import
import { View, Text, ____ } from 'react-native';import { View, Text, ScrollView } from 'react-native';Explanation: ScrollView is imported from the react-native package.
3 Match the ScrollView parts
| Term | Meaning |
|---|---|
ScrollView |
Scroll region |
vertical |
Default direction |
content |
Scrolling children |
finger |
Gesture that starts scroll |