react-native-magic-list

react-native-magic-list

animate for FlatList items.

• 中文文档
• Example

1. Examples

2. Basic Usage

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.