RefreshControl
- React Native course
- Beginner
- Lesson 63/116
- 5 min
Learn pull-to-refresh with RefreshControl.
What is RefreshControl?
RefreshControl is the pull-to-refresh mechanism. You pass a <RefreshControl> component to the refreshControl prop of ScrollView.
It has two core props: refreshing is a boolean that decides whether the spinner shows; onRefresh is the function called when the pull gesture starts.
The flow is: the user pulls down, onRefresh fires, you set refreshing to true, then back to false when data arrives. This loop gives the pull-to-refresh feel.
The refreshing state pattern
To drive the pull-to-refresh flow you need a useState hook. Define it as const [refreshing, setRefreshing] = useState(false). It starts as false.
Inside onRefresh, first call setRefreshing(true), then load the data, finally call setRefreshing(false) to hide the spinner.
You saw useState in the Counter project. You will see its details in the State group; this pattern is enough for now. A fixed delay can be simulated with setTimeout.
Practice Add pull-to-refresh
Write a <ScrollView>. Pass <RefreshControl refreshing={'{refreshing}'} onRefresh={'{handleRefresh}'} /> to its refreshControl prop. Define refreshing with useState(false) and a handleRefresh that uses setTimeout to flip it back to false after two seconds.
Starter code
import { ScrollView, Text, RefreshControl } from 'react-native';
import { useState } from 'react';
// write the pull-to-refresh ScrollView hereSample solution
function App() {
const [refreshing, setRefreshing] = useState(false);
const handleRefresh = () => {
setRefreshing(true);
setTimeout(() => setRefreshing(false), 2000);
};
return (
<ScrollView refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}>
<Text>Row one</Text>
<Text>Row two</Text>
</ScrollView>
);
}
export default App;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Import RefreshControl
import { ScrollView, ____ } from 'react-native';import { ScrollView, RefreshControl } from 'react-native';Explanation: RefreshControl is imported from the react-native package.
2 Match the RefreshControl parts
| Term | Meaning |
|---|---|
refreshControl |
Given to the ScrollView prop |
refreshing |
Spinner state |
onRefresh |
Called when the pull starts |
setRefreshing |
Updates the state |
3 When does the spinner hide?
- When the device rotates
- When setRefreshing(false) is called Correct answer
- When the app closes
- When the user scrolls up
Explanation: when refreshing becomes false the spinner disappears.