rn-animated-flatlist

rn-animated-flatlist is an extended version of the FlatList component with built-in animations, providing smoother and more dynamic scrolling experiences. It supports all the original FlatList props and is available for both iOS and Android platforms.

Features

• Smooth animations for scrolling and rendering.
• Fully customizable, inheriting all the props of FlatList.
• Works seamlessly on both iOS and Android.

Demo

Installation

To install the package, use npm or yarn:

npm install rn-animated-flatlist

OR

yarn add rn-animated-flatlist

Usage

/**
 * @Auther
 * Muhammad Faiz
 * [email protected]
 *
 *
 */

import React from "react";
import { StyleSheet, Text, View } from "react-native";

import { AnimatedFlatList } from "rn-animated-flatlist";
import { Data } from "./src/mocks/FlatListData";

function App(): React.JSX.Element {
  return (
    <View style={styles.container}>
      <AnimatedFlatList
        contentContainerStyle={{ gap: 20, paddingTop: 100, flexGrow: 1 }}
        showsVerticalScrollIndicator={false}
        data={Data}
        renderItem={({ item }) => {
          return (
            <View
              style={{
                borderRadius: 10,
                paddingVertical: 20,
                paddingHorizontal: 20,
                backgroundColor: "lightgreen",
              }}
            >
              <Text>{item.text}</Text>
            </View>
          );
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;