hongkouHenk / flatlist-intro-animations

A custom FlatList component that offers 5 types of item intro animations
31 stars 10 forks source link

React Native FlatList Intro Animations

A custom FlatList component that offers 5 types of item intro animations

preview

Features

Installation

yarn add flatlist-intro-animations

# or

npm install flatlist-intro-animations

Usage

import React, { useState, useEffect} from 'react';

import { AnimatedFlatList, AnimationType } from 'flatlist-intro-animations';

import MyCustomItem from './MyCustomItem';

import DATA from './yourDataSource';

const Fade: React.FC<ScreenProps> = ({ navigation }) => {
  return (
    <AnimatedFlatList
      data={DATA}
      renderItem={({ item }) => <MyCustomItem item={item} />}
      animationType={AnimationType.Fade}
      animationDuration={1000}
      focused={focused}
    />
  );
};

export default Home;

Props

data

Insert a plain data array.

required: YES | type: array

renderItem

Takes an item from data and renders it into the list. Provides all typical FlatList metadata, such as item, index, and separators.

required: YES | type: function

animationType

The component currently offers 5 types of intro animations to choose from;

required: YES | type: enum

animationDuration

Only applicable to timing animation types. Sets the duration of the animation for each item.

required: NO | type: number

focused

Can be applied to reset the animation value to original state. Useful for rendering FlatList inside TabBar screens. (See example.)

required: NO | type: boolean | default: true

flatlistRef

Gives access to FlatList methods.

required: NO | type: -

FlatList props

The component currently supports the following FlatList props:

I'll update soon with more.

required: NO | type: -

License

MIT