react-native-infinite-scroller v0.1.2

react-native-infinite-scroller

The react-native-infinite-scroller component is a customizable React Native component for rendering data lists with lazy loading, infinite scrolling, and fallback options when no data is available. This component simplifies managing data fetching, loading states, and UI updates in list-based views.

Features

• Supports lazy loading with customizable fetch triggers.
• Displays a fallback message when the data list is empty.
• Shows a customizable loader while fetching data.
• Handles end-of-list messages when all items are loaded.
• Fully customizable styles and messages for fallback and loading states.

Installation

Install the necessary dependencies:

npm install react-native-infinite-scroller

Usage

Here is a basic example of how to use the InfiniteScrollList component:

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import InfiniteScrollList from 'react-native-infinite-scroller';

const App = () => {
    const [data, setData] = useState<number[]>([]);
    const [isLoading, setIsLoading] = useState(false);
    const totalLength = 50;

    const fetchMoreData = () => {
        if (data.length >= totalLength) return;

        setIsLoading(true);
        setTimeout(() => {
            setData(prevData => [
                ...prevData,
                ...Array.from({ length: 10 }, (_, i) => prevData.length + i + 1),
            ]);
            setIsLoading(false);
        }, 1500);
    };

    return (
        <InfiniteScrollList
            data={data}
            keyExtractor={(item) => item.toString()}
            renderItem={({ item }) => (
                <View style={{ padding: 10 }}>
                    <Text>Item {item}</Text>
                </View>
            )}
            isLoading={isLoading}
            totalLength={totalLength}
            onFetchTrigger={fetchMoreData}
        />
    );
};

export default App;

Props

Since InfiniteScrollerList internally uses FlatList, it automatically supports all FlatList props. Below are the specific props that can be passed to InfiniteScrollerList:

Customization

You can customize the fallback text, loader, and end-of-list message styles by passing the appropriate props:

<InfiniteScrollList
    fallbackTextOnEmptyData="No items found. Please try again later."
    customLoader={<CustomLoaderComponent />}
    endOfListMessage="You've reached the end of the list."
    fallbackTextContainerStyle={{ backgroundColor: 'lightgray' }}
    fallbackTextStyle={{ fontSize: 16, color: 'red' }}
    endOfListMessageStyle={{ fontSize: 14, fontStyle: 'italic' }}
    // other props
/>

Styling

The component provides default styles that can be overridden using the following props:

• fallbackTextContainerStyle
• fallbackTextStyle
• endOfListMessageStyle

Improvements & Updates

• Added default values for all props in the documentation.
• Enhanced customization options for fallback text, loaders, and end-of-list messages.
• Improved the overall flexibility and usability of the component.

License

This project is licensed under the MIT License.