A Flatlist component that supports using custom lottie animations for pull to refresh
npm install @groftware/lottie-flatlist> To those interested in learning how this component is built, you can check out this article on Medium. We write articles explaining how our components are built on our Medium page. If you're interested in that, feel free to follow us.
Table of contents
* Insallation
* Usage
* Contact
A Flatlist component allows you to turn any lottie animation into a pull to refresh component.
npm i @groftware/lottie-flatlist
`
or
yarn add @groftware/lottie-flatlist
`Usage
Usage is similar to a regular FlatList, but with additional props. accepts an animationSource prop, which is any JSON Lottie animation.$3
`
import LottieFlatlist from '@groftware/lottie-flatlist'export default function MyApp() {
const animationSource = require('./path/to/animation.json');
const data = [
'a',
'b',
'c',
'd',
'e',
'f',
'g',
'h',
];
const [refreshing, setRefreshing] = useState(false);
function onRefresh() {
setRefreshing(true);
setTimeout(() => {
setRefreshing(false);
}, 1000);
}
function renderItem({ item }) {
return (
{item}
);
}
return (
renderItem={renderItem}
animationSource={animationSource}
refreshing={refreshing}
onRefresh={onRefresh}
/>
);
}
$3
renderItem={renderItem}
animationSource={animationSource}
refreshing={refreshing}
onRefresh={onRefresh} // Optional props
animationSize={30}
refreshHeight={100}
/>
| Property | Type | Description | Required |
|---|---|---|---|
| data | array | Same as FlatList data | Yes |
| renderItem | function | Same as FlatList renderItem | Yes |
| ListHeaderComponent | component | Same as FlatList ListHeaderComponent | No |
| animationSource | object | Animation asset lottie json | Yes |
| refreshing | boolean | Whether is refreshing or not. Similar to React Native's RefreshControl component | Yes |
| onRefresh | function | Called when refresh is triggered. Similar to React Native's RefreshControl component | Yes |
| animationSize | number | Size of the lottie animation. This sets the width and height of the animation. Default value is 100. | No |
| refreshHeight | number | Height that triggers the refreshing. Default value is 100. | No |