React Native Animated List
High order component to animate and provide animation interfacing for react native ListView. Includes animation presets and is highly customizable.
Example
Demo is under examples folder
To build and run a example app:
git clone https://github.com/franciscofsales/react-native-animated-list
cd react-native-animated-list/examples/simple
npm install
To run on iOS:
react-native run-ios
To run on Android:
react-native run-android
Installation
Using npm:
$ npm install --save react-native-animated-list
Usage
import React, { Component } from 'react';
import AnimatedList from 'react-native-animated-list';
render() {
return (
<AnimatedList
animation="scale"
items={Data}
duration={300}
renderRow={this._renderRow}
onRemove={(item) => this._removeItem(item)}
/>
);
}
Props
Prop | Type | Description |
---|---|---|
animation |
string<opacity|scale|slideLeft|slideRight> |
Animation preset. |
duration |
number |
Length of animation in milliseconds. Default 300. |
animationFunc |
() => Animated animation object |
Function to define a custom animation. |
renderRow |
() => ReactElement<any> |
Function to render a row. |
onRemove |
() => ReactElement<any> |
Function to delete a row. |
Contributing
All contributions are very appreciated <3.