Install

Required install Reanimated and React Native Gesture Handler.

npm i react-native-custom-pull-to-refresh

Use lib

"react-native-gesture-handler": "^2.15.0",
"react-native-reanimated": "^3.6.2"

Props

Name	Description	Value
ref	ref?.current?.goTop() can be used to scroll to the top of the list.	React.ref
onRefresh	Function to call when the list is pulled to refresh. This function is triggered when the user pulls down the list.	() => void
onScroll	Function to handle scroll event. It can be used to perform actions during the scroll.	(event: NativeSyntheticEvent<NativeScrollEvent>) => void
THRESHOLD	The threshold height for triggering the refresh. Defaults to 150. This is the height the user must pull down to trigger the onRefresh function.	number (Default: 150)
RefreshComponent	Component displayed when the list is pulled down. This could be an animation or an indicator that shows the list is being refreshed.	React.Element, null, undefined
ListHeaderComponent	Optional header component for the list. This component is displayed at the top of the list.	React.Element, null, undefined
refreshPosition	Determines whether the refresh component appears above or below the ListHeaderComponent. Defaults to 'top'.	'top', 'bottom' (Default: 'top')
data	Data for the list. This is an array of any type that represents the data to be rendered in the list.	any[]
renderItem	Function to render each item in the data array. It defines how each item in the list should be rendered.	any
contentContainerStyle	Style object for the content container. This allows for customization of the list's container style.	any
useOpacity	Opacity 0~1 when RefreshComponent Showing	boolean

example

import React from 'react';
import {ActivityIndicator, StyleSheet, Text, View} from 'react-native';
import PullToRefreshFlatList from 'react-native-custom-pull-to-refresh';

const iphoneData = 
[{'id': '15', 'model': 'iPhone 15', 'description': 'The iPhone 15 pushes the boundaries of technology with its advanced features.'},
{'id': '14', 'model': 'iPhone 15 Pro', 'description': 'The iPhone 15 Pro offers professional-level photography with its superior camera system.'},
{'id': '13', 'model': 'iPhone 14', 'description': 'The iPhone 14 introduces an all-new design and next-level performance.'},
{'id': '12', 'model': 'iPhone 14 Pro', 'description': 'The iPhone 14 Pro features a cutting-edge display technology and camera improvements.'},
{'id': '11', 'model': 'iPhone 13', 'description': 'The iPhone 13 features an even brighter OLED display and the A15 Bionic chip.'},
{'id': '10', 'model': 'iPhone 13 Pro', 'description': 'The iPhone 13 Pro brings new capabilities to professional photography and video.'},
{'id': '9', 'model': 'iPhone 12', 'description': 'The iPhone 12 features the first 5G technology and a new Ceramic Shield front cover.'},
{'id': '8', 'model': 'iPhone 12 Pro', 'description': 'The iPhone 12 Pro offers a powerful photography system and 5G speeds.'},
{'id': '7', 'model': 'iPhone 11', 'description': 'The iPhone 11 features a dual-camera system for ultra wide photos.'},
{'id': '6', 'model': 'iPhone 11 Pro', 'description': 'The iPhone 11 Pro features a triple-camera system for professional-level photos.'},
{'id': '5', 'model': 'iPhone XS Max', 'description': 'The iPhone XS Max features a 6.5-inch Super Retina display.'},
{'id': '4', 'model': 'iPhone XS', 'description': 'The iPhone XS features a 5.8-inch Super Retina display.'},
{'id': '3', 'model': 'iPhone XR', 'description': 'The iPhone XR features a 6.1-inch Liquid Retina display.'},
{'id': '2', 'model': 'iPhone X', 'description': 'The iPhone X features a new all-screen design.'},
{'id': '1', 'model': 'iPhone 8 Plus', 'description': 'The iPhone 8 Plus features dual cameras for extraordinary photos.'},
{'id': '0', 'model': 'iPhone 8', 'description': 'The iPhone 8 introduces a new glass design.'}]


function App(): React.JSX.Element {
  const ListHeaderComponent = () => {
    return (
      <View style={styles.headerContainer}>
        <Text style={styles.headerText}>ListHeaderComponent</Text>
      </View>
    );
  };

  const Item = ({model, description}) => {
    return (
      <View style={styles.itemContainer}>
        <Text style={styles.itemModel}>{model}</Text>
        <Text style={styles.itemDescription}>{description}</Text>
      </View>
    );
  };

  const renderItem = ({item}) => (
    <Item model={item.model} description={item.description} />
  );

  const SimpleRefreshComponent = () => {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" color="#0000ff" />
        <Text style={styles.text}>Refetch ...</Text>
      </View>
    );
  };

  return (
    <View style={{flex: 1, paddingTop: 80, paddingBottom: 35}}>
        <PullToRefreshFlatList
          THRESHOLD={350}
          onRefresh={() => console.log('refresh')}
          data={iphoneData}
          renderItem={renderItem}
          refreshPosition={'top'}
          keyExtractor={item => item.id}
          ListHeaderComponent={ListHeaderComponent}
          RefreshComponent={SimpleRefreshComponent}
          useOpacity={false}
        />
    </View>
  );
}

const styles = StyleSheet.create({
  headerContainer: {
    padding: 20,
    backgroundColor: '#f0f0f0',
    alignItems: 'center',
  },
  headerText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  itemContainer: {
    backgroundColor: '#FFF',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  itemModel: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  itemDescription: {
    fontSize: 14,
    marginTop: 4,
  },
  container: {
    height: 150,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
    backgroundColor: '#f0f0f0',
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  text: {
    marginTop: 10,
    fontSize: 16,
    fontWeight: 'bold',
    color: '#0000ff',
  },
});

export default App;

error

- install react-native-reanimated and react-native-gesture-handler

Reanimated
React Native Gesture Handler

- add babel.config.js

  plugins: ['react-native-reanimated/plugin']

- anroid animate slow

AndroidManifest.xml add android:hardwareAccelerated="true"