RefreshControl: The Pull-to-Refresh Handler
RefreshControl adds the native "pull-to-refresh" spinner to your lists. Use it inside a ScrollView or FlatList to let users manually trigger a data update. The footgun: you must control the 'refreshing' prop manually or the spinner vanishes instantly.
Why it exists
Mobile users expect to be able to pull down on a list to get the latest data. RefreshControl provides this standard UI pattern, connecting a common gesture to an app-specific data-fetching action without developers having to build the gesture detection and animation from scratch.
The mental model
Think of RefreshControl as a controlled component, like a text input. You provide its current state (the 'refreshing' prop) and a function to call when the user interacts with it (the 'onRefresh' callback). The component itself doesn't fetch data; it just tells you when to fetch data and shows a spinner while you tell it to.
How it works
You pass an instance of RefreshControl to the refreshControl prop of a ScrollView or FlatList. When the user pulls the list down from the very top, the component's onRefresh callback is triggered. Inside this callback, you must immediately set a state variable that controls the refreshing prop to true. Then, you start your data fetching logic. Once the data fetch completes, you set that same state variable back to false to hide the spinner.
When to use it
Use RefreshControl inside any ScrollView, FlatList, or SectionList where users need to manually trigger a content update. This is the standard UI for social media feeds, news lists, dashboards, or any list of data that can change on the server.
When not to use it
Do not use it for non-scrollable content, as the pull gesture won't be available. It is also not a substitute for real-time updates (like WebSockets) if your application requires instant data synchronization without user interaction. RefreshControl is for user-initiated actions only.
One canonical example
The most common footgun is misunderstanding the refreshing prop. It's a controlled prop. You must have a state variable, say isRefreshing, that you pass to it. Your onRefresh handler must call setIsRefreshing(true) at the very beginning. Then, after your async data fetching operation is complete, you must call setIsRefreshing(false). If you forget to set it to true, the refresh indicator will appear and disappear immediately, before your data has a chance to load.
Interview question
What is the most crucial step to ensure the RefreshControl spinner remains visible during a data fetch?
- a.Providing a 'key' prop to the RefreshControl component.
- b.Setting the 'refreshing' prop to true immediately when 'onRefresh' is called.Correct
- c.Nesting RefreshControl within a FlatList or ScrollView.
- d.Ensuring the data fetching logic is asynchronous.
Why? this is the answer
The card emphasizes that RefreshControl is a controlled component; the 'refreshing' prop must be explicitly set to true at the start of the 'onRefresh' callback to keep the spinner visible during data fetching. Option C is necessary for RefreshControl to function, but not specifically for maintaining its visibility during the fetch itself.
Just read this? Test yourself on what you have been reading.
Read the original → reactnative.dev
- #react native
- #ui
- #mobile
- #data fetching
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react native — each one lists the topics its interview covers.
See open roles