@ja-ka/react-native-fade-in-flatlist NPM

react-native-fade-in-flatlist

Advanced React Native FlatList component with fade-in support for rendered items.

Getting Started

$ npm install @ja-ka/react-native-fade-in-flatlist --save

$ 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

`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.