Required install [Reanimated](https://github.com/kmagiera/react-native-reanimated) and [React Native Gesture Handler](https://github.com/kmagiera/react-native-gesture-handler).
npm install react-native-custom-pull-to-refreshRequired install Reanimated and React Native Gesture Handler.
``
npm i react-native-custom-pull-to-refresh
"react-native-gesture-handler": "^2.15.0",
"react-native-reanimated": "^3.6.2"
Props
| Name | Description | Value |
|------------------------|-------------------------------------------------------------------------------------------------|-------------------|
|
| 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 |
| 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 (
ListHeaderComponent
);
};
const Item = ({model, description}) => {
return (
{model}
{description}
);
};
const renderItem = ({item}) => (
);
const SimpleRefreshComponent = () => {
return (
Refetch ...
);
};
return (
onRefresh={() => console.log('refresh')}
data={iphoneData}
renderItem={renderItem}
refreshPosition={'top'}
keyExtractor={item => item.id}
ListHeaderComponent={ListHeaderComponent}
RefreshComponent={SimpleRefreshComponent}
useOpacity={false}
/>
);
}
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
$3
Reanimated
React Native Gesture Handler
$3
plugins: ['react-native-reanimated/plugin']