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.