Custom FlatList Component for React Native

A customizable FlatList component for React Native with enhanced flexibility, styling, and scroll behavior support.

✨ Features

Supports both horizontal and vertical scrolling

Customizable styles

Paging enabled for smooth scrolling

Scroll event handling support

Shows/hides scroll indicators

Easy integration

📦 Installation

npm install @krishna_gupta/custom-flatlist

🚀 Usage

import CustomFlatList from "@krishna_gupta/custom-flatlist";

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

const data = [

{ id: "1", title: "Item 1" },

{ id: "2", title: "Item 2" },

{ id: "3", title: "Item 3" }, ];

const renderItem = ({ item }) =>(

<View style={{ padding: 20, backgroundColor: "#f0f0f0", marginVertical: 10 }}>

<Text>{item.title}</Text>

const App = () => { return (

<CustomFlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
  horizontal={false}
  pagingEnabled={true}
  showsHorizontalScrollIndicator={false}
  showsVerticalScrollIndicator={true}
  contentContainerStyle={{ padding: 10 }}
  onScroll={(event) => console.log("Scrolling...", event)}
  onMomentumScrollEnd={() => console.log("Scroll Ended")}
  style={{ flex: 1 }}
/>

); };

🔧 Props-

Props Name: data, renderItem, keyExtractor, horizontal, pagingEnabled, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, contentContainerStyle, onScroll, onMomentumScrollEnd, style