Pull-to-refresh patterns in React Native

Introduction

Pull-to-refresh lets users update content by pulling down on a list. It feels natural and helps keep data fresh.

When showing a list of messages that can change often.

In a news app to load the latest articles.

On a social feed to get new posts.

In a shopping app to refresh product availability.

When you want a simple way for users to reload data without buttons.

Syntax

React Native

import { RefreshControl, ScrollView } from 'react-native';

<ScrollView
  refreshControl={
    <RefreshControl
      refreshing={refreshing}
      onRefresh={onRefresh}
    />
  }
>
  {/* content here */}
</ScrollView>

refreshing is a boolean that shows if the refresh is happening.

onRefresh is a function called when the user pulls down to refresh.

Examples

This example shows how to control the refreshing state and simulate data loading.

React Native

const [refreshing, setRefreshing] = useState(false);

const onRefresh = () => {
  setRefreshing(true);
  // fetch new data here
  setTimeout(() => setRefreshing(false), 2000);
};

Basic ScrollView with pull-to-refresh enabled.

React Native

<ScrollView
  refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
>
  <Text>Pull down to refresh</Text>
</ScrollView>

Sample App

This app shows a list of items. Pulling down refreshes the list by adding a new item after a short delay.

React Native

import React, { useState, useCallback } from 'react';
import { ScrollView, RefreshControl, Text, View, StyleSheet } from 'react-native';

export default function PullToRefreshExample() {
  const [refreshing, setRefreshing] = useState(false);
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setItems(prev => [...prev, `New Item ${prev.length + 1}`]);
      setRefreshing(false);
    }, 1500);
  }, []);

  return (
    <ScrollView
      contentContainerStyle={styles.container}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    >
      {items.map(item => (
        <View key={item} style={styles.item}>
          <Text>{item}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20 },
  item: { padding: 15, backgroundColor: '#eee', marginBottom: 10, borderRadius: 5 }
});

Important Notes

Always set refreshing to false after loading finishes to hide the spinner.

Use RefreshControl only inside scrollable components like ScrollView or FlatList.

Keep the refresh action fast to avoid frustrating users.

Summary

Pull-to-refresh lets users update content by dragging down on lists.

Use RefreshControl with ScrollView or FlatList in React Native.

Control refreshing state with a boolean and update data in the refresh callback.

Practice

1. What is the main purpose of using RefreshControl in React Native pull-to-refresh patterns?

easy

A. To load images asynchronously in the list.

B. To navigate between different screens in the app.

C. To provide a visual indicator and handle the refresh action when the user pulls down on a list.

D. To style the list items with custom colors.

Solution

1. Step 1: Understand the role of RefreshControl

   RefreshControl is used to show a spinner and detect pull-down gestures on scrollable lists.

2. Step 2: Identify its purpose in pull-to-refresh

   It triggers a refresh callback and shows a loading indicator while data updates.

3. Final Answer:

   To provide a visual indicator and handle the refresh action when the user pulls down on a list. -> Option C

4. Quick Check:

   RefreshControl = Visual indicator + refresh handler [OK]

Hint: RefreshControl shows spinner and triggers refresh on pull [OK]

Common Mistakes:

• Confusing RefreshControl with navigation components
• Thinking RefreshControl styles list items
• Assuming RefreshControl loads images

2. Which of the following is the correct way to add pull-to-refresh to a FlatList in React Native?

easy

A. } />

B.

C.

D.

Solution

1. Step 1: Recall correct RefreshControl usage

   React Native uses the refreshControl prop on scrollable components like FlatList to enable pull-to-refresh.

2. Step 2: Match correct syntax

   The correct syntax is passing a RefreshControl component with refreshing and onRefresh props inside refreshControl.

3. Final Answer:

   <FlatList refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />} /> -> Option A

4. Quick Check:

   refreshControl prop with RefreshControl component = correct [OK]

Hint: Use refreshControl prop with RefreshControl component [OK]

Common Mistakes:

• Using non-existent props like onPullRefresh
• Passing boolean props directly without RefreshControl
• Confusing prop names like pullToRefresh

3. Given this code snippet, what will be the value of refreshing after the user pulls down and the onRefresh function finishes?

const [refreshing, setRefreshing] = useState(false);

const onRefresh = () => {
  setRefreshing(true);
  fetchData().then(() => setRefreshing(false));
};

medium

A. true

B. false

C. undefined

D. null

Solution

1. Step 1: Analyze state changes during refresh

   Initially, refreshing is false. When onRefresh runs, it sets refreshing to true.

2. Step 2: Understand asynchronous fetchData effect

   After fetchData completes, setRefreshing(false) runs, setting refreshing back to false.

3. Final Answer:

   false -> Option B

4. Quick Check:

   Refreshing ends with false after fetch completes [OK]

Hint: Refreshing state toggles true then false after fetch [OK]

Common Mistakes:

• Assuming refreshing stays true forever
• Confusing asynchronous timing of setState
• Ignoring the promise resolution

4. Identify the error in this pull-to-refresh implementation:

const [refreshing, setRefreshing] = useState(false);

const onRefresh = () => {
  setRefreshing(true);
  fetchData();
  setRefreshing(false);
};

return (
  <FlatList
    data={data}
    refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
  />
);

medium

A. setRefreshing(false) is called immediately, not after fetchData finishes.

B. refreshControl prop is missing onRefresh handler.

C. refreshing state is not initialized.

D. FlatList cannot use RefreshControl.

Solution

1. Step 1: Check refresh state timing

   The code calls setRefreshing(false) immediately after fetchData(), without waiting for data to load.

2. Step 2: Understand asynchronous fetchData

   Since fetchData is async, refreshing should be set to false only after it completes, typically in a .then() or async/await.

3. Final Answer:

   setRefreshing(false) is called immediately, not after fetchData finishes. -> Option A

4. Quick Check:

   Refreshing must end after fetch completes, not immediately [OK]

Hint: Wait for fetchData to finish before setting refreshing false [OK]

Common Mistakes:

• Calling setRefreshing(false) too early
• Ignoring async nature of fetchData
• Misplacing refreshControl props

5. You want to implement pull-to-refresh on a ScrollView that loads a list of items from an API. Which approach correctly updates the UI and handles the refreshing state? A) Use refreshControl with a RefreshControl component, manage a boolean refreshing state, and update the list data inside the onRefresh callback after fetching. B) Use onRefresh prop directly on ScrollView and update data without managing refreshing state. C) Use a button to reload data instead of pull-to-refresh. D) Use refreshing state only without RefreshControl component.

hard

A. Use refreshing state only without RefreshControl component.

B. Use onRefresh prop on ScrollView without refreshing state.

C. Use a button to reload data instead of pull-to-refresh.

D. Use refreshControl with RefreshControl, manage refreshing state, update data in onRefresh.

Solution

1. Step 1: Understand ScrollView pull-to-refresh pattern

   React Native requires RefreshControl passed via refreshControl prop to enable pull-to-refresh on ScrollView.

2. Step 2: Manage refreshing state and update data

   You must manage a boolean refreshing state to show the spinner and update the list data inside the onRefresh callback after fetching new data.

3. Final Answer:

   Use refreshControl with RefreshControl, manage refreshing state, update data in onRefresh. -> Option D

4. Quick Check:

   RefreshControl + refreshing state + data update = correct pattern [OK]

Hint: Always use RefreshControl with refreshing state on ScrollView [OK]

Common Mistakes:

• Trying to use onRefresh prop directly on ScrollView
• Not managing refreshing state boolean
• Skipping RefreshControl component