Custom ScrollView's refresh control
npm install @smadey/react-native-refreshablesh
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:
`sh
npm install --save react-native-gesture-handler
react-native link react-native-gesture-handler
`and follow the steps
Usage
`js
import Refreshable, { useSpinner } from 'react-native-refreshable'// before
// after
const RefreshComponent = React.memo(({ status }) => {
const progress = useSpinner(status === 2 || status === 3)
return (
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'] }) }] }}
/>
)
})
const onRefresh = React.useCallback(() => {
return new Promise(resolve => setTimeout(resolve, 1500))
}, [])
`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. ||