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:

1npm install react-native-infinite-scroller

Usage

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

1import React, { useState } from 'react';
2import { View, Text } from 'react-native';
3import InfiniteScrollList from 'react-native-infinite-scroller';
4
5const App = () => {
6    const [data, setData] = useState<number[]>([]);
7    const [isLoading, setIsLoading] = useState(false);
8    const totalLength = 50;
9
10    const fetchMoreData = () => {
11        if (data.length >= totalLength) return;
12
13        setIsLoading(true);
14        setTimeout(() => {
15            setData(prevData => [
16                ...prevData,
17                ...Array.from({ length: 10 }, (_, i) => prevData.length + i + 1),
18            ]);
19            setIsLoading(false);
20        }, 1500);
21    };
22
23    return (
24        <InfiniteScrollList
25            data={data}
26            keyExtractor={(item) => item.toString()}
27            renderItem={({ item }) => (
28                <View style={{ padding: 10 }}>
29                    <Text>Item {item}</Text>
30                </View>
31            )}
32            isLoading={isLoading}
33            totalLength={totalLength}
34            onFetchTrigger={fetchMoreData}
35        />
36    );
37};
38
39export 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:

Prop Name	Type	Default Value	Description
isLoading	boolean	false	Indicates if the component is loading data.
triggerThreshold	number	100	The threshold (in pixels) from the bottom of the list to trigger onFetchTrigger.
onFetchTrigger	() => void	Required	Function to be called when the user scrolls near the bottom of the list.
totalLength	number	0	Total number of items available in the data source.
fallbackTextOnEmptyData	string	"No data available."	Custom fallback text when no data is present.
customLoader	React.ReactNode	<ActivityIndicator size="large" />	Custom loader component for loading state.
fallbackTextContainerStyle	ViewStyle	{ flex: 1, justifyContent: "center", alignItems: "center", height: 200 }	Style for the container of fallback text when no data is present.
fallbackTextStyle	TextStyle	{ textAlign: "center", color: "#888" }	Style for the fallback text when no data is present.
endOfListMessage	string	"Page End Reached"	Message to display when the user reaches the end of the list.
endOfListMessageStyle	TextStyle	{ textAlign: "center", color: "#888", padding: 10 }	Style for the end-of-list message text.

Customization

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

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

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.