A custom FlatList component that offers 5 types of item intro animations
yarn add flatlist-intro-animations
# or
npm install flatlist-intro-animations
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;
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:
-