How to create a pull to refresh loader in React Native? Code Example

Pull to refresh loader works in ScrollView and List components like FlatList or SectionList. Although these lists supports pull to refresh inherently but that is not customizable.

React Native provides <RefreshControl> component which supports some customization like changing loader color and background. Also you can add some message after loader in iOS.

Code Example

import React from 'react';
import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';

const App = () => {
  const [refreshing, setRefreshing] = React.useState(false);

  const onRefresh = () => {
    if(!refreshing) {
      setRefreshing(true);
      setTimeout(() => setRefreshing(false), 8000);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <Text>Pull down to see RefreshControl indicator</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  scrollView: {
    flex: 1,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

The output will look like this –

In this code we using <RefreshControl> component in refreshControl prop of ScrollView. This is the basic implementation of refresh controller where we passed the refreshing state and onRefresh function.

Live Demo

Conclusion

A simple pull to refresh functionality can be created using <RefreshControl> component of React Native. It works with ScrollView, FlatList and SectionList.