Package Exports

rn-animated-flatlist
rn-animated-flatlist/index.tsx

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rn-animated-flatlist) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
 * faizqadri234@gmail.com
 *
 *
 */

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;