React-native-flatlist-animated NPM

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.

zoom slide

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.

Property	Description	Default
`itemContainerHeight`	Required. Height of a single list item.	`-`
`entering`	Optional. Animation selection for entering phase.	`zoomIn`
`exiting`	Optional. Animation selection for exiting phase.	`zoomOut`
`transition`	Optional. Animation selection for layout transitions.	`spring`
`reordering`	Optional. Animation selection for items that are moved up in the list.	`translateOnly`
`timingConfig`	Optional. Animation configuration for transitions. Requires `transition="timing"`.	Default timing config in Animated API. Note that below props will be overwritten: `toValue: 1`, `duration: depends`, `delay: depends`, `useNativeDriver: true`
`springConfig`	Optional. Animation configuration for transitions. Requires `transition="spring"`.	Default spring config in Animated API. Note that below props will be overwritten: `toValue: 1`, `delay: depends`, `useNativeDriver: true`
`enterDuration`	Optional. Duration of entering animation in milliseconds.	`250`
`exitDuration`	Optional. Duration of exiting animation in milliseconds.	`250`
`horizontalSlideRange`	Optional. The initial or final position to be used in sliding type animations.	screen width

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.

react-native flatlist react-component react-native-component animated mobile ios android ui unmounting transition layout

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago