react-native-fade-in-flatlist

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

Table of Contents

Getting Started

Usage

Examples

Props

To Do

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

• Inherited FlatList props...
• initialDelay
• durationPerItem
• parallelItems
• itemsToFadeIn

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.