react-native-flatlist-animated

Animated FlatList component that supports entering, exiting and reordering animations.

Installation

npm i react-native-flatlist-animated

Demo

Supports zoom, fade and slide animations for enterance and exit.

Key Advantages

• No animation on layout properties (better performance)
• Handles unmounting and mounting animations
• Handles list re-ordering
• Native driver is used in all animations
• Supports React Native FlatList props
• JavaScript only implementation
• Fully typed

Usage

import { Text, View } from "react-native";
import AnimatedFlatList from "react-native-flatlist-animated";

const listData = [
  { key: "item1", value: "ITEM-1" },
  { key: "item2", value: "ITEM-2" },
];

() => (
  <AnimatedFlatList
    data={listData}
    style={{ width: "100%" }}
    itemContainerHeight={50}
    renderItem={({ item, _index }) => (
      <View style={{ width: "100%", height: "100%" }}>
        <Text>{item.value}</Text>
      </View>
    )}
  />
);

Properties

• Any FlatList property.
• The following properties are supported.

Examples

Check full example in the Example folder.

• Click on the items to remove them from the list.
• Press Add Item to add random entry from the map.
• Press Delete Item to remove a random entry from the list.
• Press Reorder Item to pick a random entry and change its position randomly.

Note: The assets used in the example app represent imaginary characters but influenced by real friendship. I have used Aseprite for pixel art.