react-native-fade-in-flatlist
v1.0.15
Published
An advanced React Native FlatList component with fade-in support for rendered items.
Downloads
3
Readme
react-native-fade-in-flatlist
Advanced React Native FlatList component with fade-in support for rendered items.
Table of Contents
Getting Started
$ npm install @ja-ka/react-native-fade-in-flatlist --save
or
$ yarn add @ja-ka/react-native-fade-in-flatlist
Usage
Repace React Native's FlatList
component with FadeInFlatList
imported from @ja-ka/react-native-fade-in-flatlist
:
// Your code with React Native FlatList
import { FlatList } from 'react-native';
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={keyExtractor}
/>
// Your code with @ja-ka/react-native-fade-in-flatlist
import { FadeInFlatList } from '@ja-ka/react-native-fade-in-flatlist';
<FadeInFlatList
data={DATA}
renderItem={renderItem}
keyExtractor={keyExtractor}
/>
Examples
|Example 1|Example 2|Example 3| |:---:|:---:|:---:| ||||
// Example 1
import { FadeInFlatList } from '@ja-ka/react-native-fade-in-flatlist';
<FadeInFlatList
initialDelay={0}
durationPerItem={500}
parallelItems={1}
itemsToFadeIn={10}
data={DATA}
renderItem={renderItem}
keyExtractor={keyExtractor}
/>
// Example 2
import { FadeInFlatList } from '@ja-ka/react-native-fade-in-flatlist';
<FadeInFlatList
initialDelay={0}
durationPerItem={500}
parallelItems={5}
itemsToFadeIn={10}
data={DATA}
renderItem={renderItem}
keyExtractor={keyExtractor}
/>
// Example 3
import { FadeInFlatList } from '@ja-ka/react-native-fade-in-flatlist';
<FadeInFlatList
initialDelay={1000}
durationPerItem={2000}
parallelItems={3}
itemsToFadeIn={10}
data={DATA}
renderItem={renderItem}
keyExtractor={keyExtractor}
/>
Props
Props
initialDelay
Initial delay in milliseconds before the first item is rendered.
|Type|Requried|Default| |---|---|---| |number|no|0|
durationPerItem
Time in milliseconds until the item is fully visible (opacity is 1).
|Type|Requried|Default| |---|---|---| |number|no|50|
parallelItems
Number of items to be rendered in parallel. In case of parallelItems={1}
, the next item starts to fade in only when the previous item is fully visible. In case of parallelItems={2}
, the second items starts fading in when the previous item is half-visible (opacity is 0.5). In general, the next item starts fading in when the opacity of the previous item is equal to or greater than 1 / paralleLitems.
|Type|Requried|Default| |---|---|---| |number|no|1|
itemsToFadeIn
Number of items to fade in. All items where index + 1 is greater than itemsToFadeIn
are immediately visible.
|Type|Requried|Default| |---|---|---| |number|no|10|
License
This library is published under the MIT License.