CustomFlatList

CustomFlatList is a reusable and customizable wrapper around React Native's FlatList component. It provides a simple way to implement horizontally scrolling lists with pagination and other common features.

Installation

Install the package using npm or yarn:

npm install react-native-custom-flatlist

or

yarn add react-native-custom-flatlist

Usage

import React from 'react';

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

import CustomFlatList from 'react-native-custom-flatlist';

const data = [

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

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

{ id: '3', title: 'Item 3' },

];

const renderItem = ({ item }: { item: { id: string; title: string } }) => (

<View>

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

</View>

);

const keyExtractor = (item: { id: string }) => item.id;

const App = () => {

return (

    <CustomFlatList

        data={data}

        renderItem={renderItem}

        keyExtractor={keyExtractor}

    />
    
);

};

export default App;

Props

| Prop | Type | Default | Description | |-----------------------------------|--------------------------------------------------------------------|---------|-------------| | data | T[] | [] | Array of items to be rendered in the list. | | renderItem | ListRenderItem<T> | - | Function to render each item in the list. | | keyExtractor | (item: T, index: number) => string | - | Function to extract a unique key for each item. | | onMomentumScrollEnd | (event: { nativeEvent: { contentOffset: { x: number } } }) => void | - | Callback triggered when scrolling momentum ends. | | horizontal | boolean | true | Whether the list should scroll horizontally. | | pagingEnabled | boolean | true | Enables pagination for horizontal scrolling. | | showsHorizontalScrollIndicator | boolean | false | Shows or hides the horizontal scroll indicator. | | onEndReached | () => void | - | Callback triggered when the end of the list is reached. | | onEndReachedThreshold | number | - | How far from the end the event should trigger (0 to 1). | | ListFooterComponent | React.ComponentType<any> | React.ReactElement | null | null | Footer component for the list. | | refreshControl | React.ReactElement | - | Refresh control component for pull-to-refresh functionality. |