react-native-refreshable
Custom ScrollView's refresh control
Installation
npm install --save react-native-refreshable
If you are using Expo, you are done. Otherwise, continue to the next step.
Android specific
Install and link react-native-gesture-handler
, run:
npm install --save react-native-gesture-handler
react-native link react-native-gesture-handler
and follow the steps
Usage
import Refreshable, { useSpinner } from 'react-native-refreshable'
// before
<ScrollView {...props} />
// after
const RefreshComponent = React.memo(({ status }) => {
const progress = useSpinner(status === 2 || status === 3)
return (
<View style={{ alignItems: 'center', flexDirection: 'row', height: 60, justifyContent: 'center' }}>
<Animated.Image
resizeMethod="scale"
source={{ uri: 'https://readx-her-1252317822.image.myqcloud.com/boss/5322_spinner.png' }}
style={{ height: 16, width: 16, transform: [{ rotate: progress.interpolate({ inputRange: [0, 100], outputRange: ['0deg', '360deg'] }) }] }}
/>
</View>
)
})
const onRefresh = React.useCallback(() => {
return new Promise(resolve => setTimeout(resolve, 1500))
}, [])
<Refreshable {...props} RefreshComponent={RefreshComponent} onRefresh={onRefresh} />
Properties
*Note: Other properties will be passed down to ScrollView
Prop | Description | Default |
---|---|---|
RefreshComponent |
A component with status and position props. |
|
onRefresh |
A function that is called when Component has been pull down. |