animate for FlatList items.
how to use react-native-magic-list?:
npm install react-native-magic-list --save
example for how to use in Demo:
import React from 'react';
import { View } from 'react-native';
import { MagicFlatList } from 'react-native-magic-list';
const mockedData = Array(10).fill(1);
export class Demo extends React.Component {
render() {
return (
<MagicFlatList
data={mockedData}
animateType='floatFromBottom'
renderItem={() => (
<View style={{ width: 100, height: 100, backgroundColor: 'red' }} />
)}
/>
);
}
}
- props:
key | description | type | default |
---|---|---|---|
renderItem | Rendering component | function | () => void |
delay | each item's delay | number | 200 |
animateType | Entry animation type | array or string | 'floatFromBottom' |
onComplete | callback when the animation is all over | function | null |
FlatList.propTypes | Inherit FlatList's propTypes | any | null |
- Supported animation types
// base
'floatFromBottomBig';
'floatFromBottom';
'floatFromTop';
'floatFromLeft';
'floatFromRight';
'scale';
'opacity';
// mixin
'fadeIn';
'fadeInDown';
'fadeInLeft';
'fadeInRight';
'fadeInUp';
'slideInUp';
'slideInDown';
'slideInLeft';
'slideInRight';
'zoomIn';
'zoomDownIn';
'zoomUpIn';
'zoomInRight';
'zoomInLeft';
When you need to use the entrance animation you can choose the following two ways: animateType="floatFromBottom" or animateType=["floatFromBottom", '"floatFromLeft"], But if you use a hybrid animation, only the top one will work, and the rest of the base animations won't work.
sorry, now touchAnimateType is not going to work, we will fix it as soon.