React Native Smooth Scroll

A lightweight and customizable infinite scroll component for React Native. Supports pagination, pull-to-refresh, and error handling.

---

Features

• Infinite Scroll: Automatically loads more data as the user scrolls.
• Pagination: Supports paginated data fetching.
• Pull-to-Refresh: Allows refreshing the list with a pull gesture.
• Error Handling: Displays an error message if data fetching fails.
• Customizable: Customize the loader, error, and empty list components.

---

Installation

Install the library using npm or yarn:

npm install react-native-smooth-scroll

or

yarn add react-native-smooth-scroll

---

Usage

Basic Example

import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, Text, View, ActivityIndicator } from 'react-native';
import InfiniteScroll from 'react-native-smooth-scroll';

const App = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = async (pageNumber) => {
    try {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/posts?_limit=10&_page=${pageNumber}`
      );
      if (!response.ok) throw new Error('Failed to fetch data');
      const newData = await response.json();
      return newData;
    } catch (err) {
      setError(err.message);
      return [];
    }
  };

  const loadMore = async () => {
    if (error) return;
    const newData = await fetchData(page + 1);
    if (newData.length > 0) {
      setData((prevData) => [...prevData, ...newData]);
      setPage((prevPage) => prevPage + 1);
    } else {
      setHasMore(false);
    }
  };

  const handleRefresh = async () => {
    setIsRefreshing(true);
    setError(null);
    const initialData = await fetchData(1);
    setData(initialData);
    setPage(1);
    setHasMore(true);
    setIsRefreshing(false);
  };

  useEffect(() => {
    const initializeData = async () => {
      const initialData = await fetchData(1);
      setData(initialData);
    };
    initializeData();
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <InfiniteScroll
        data={data}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
            <Text>{item.body}</Text>
          </View>
        )}
        keyExtractor={(item) => item.id.toString()}
        loadMore={loadMore}
        hasMore={hasMore}
        onRefresh={handleRefresh}
        isRefreshing={isRefreshing}
        error={error}
        errorComponent={<Text style={styles.errorText}>{error}</Text>}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  errorText: {
    textAlign: 'center',
    color: 'red',
    marginVertical: 20,
  },
});

export default App;

---

Props

Prop	Type	Description
data	Array	The array of data items to render.
renderItem	Function	Function to render each item in the list.
keyExtractor	Function	Function to extract a unique key for each item.
loadMore	Function	Function to load more data. Should return a Promise.
hasMore	Boolean	Whether there is more data to load.
loaderComponent	React.ReactNode	Custom loader component to display while loading more data.
listEmptyComponent	React.ReactNode	Component to display when the list is empty.
onRefresh	Function	Function to refresh the list. Should return a Promise.
isRefreshing	Boolean	Whether the list is currently refreshing.
error	String or null	Error message to display if data fetching fails.
errorComponent	React.ReactNode	Custom error component to display when there's an error.
...flatListProps	Object	Additional props to pass to the underlying FlatList component.

---

Customization

Custom Loader

Pass a custom loader component to the loaderComponent prop:

<InfiniteScroll
  loaderComponent={<MyCustomLoader />}
  // other props
/>

Custom Error Component

Pass a custom error component to the errorComponent prop:

<InfiniteScroll
  errorComponent={<MyCustomErrorComponent />}
  // other props
/>

Custom Empty List Component

Pass a custom empty list component to the listEmptyComponent prop:

<InfiniteScroll
  listEmptyComponent={<MyCustomEmptyComponent />}
  // other props
/>

---

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/YourFeatureName).
3. Commit your changes (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature/YourFeatureName).
5. Open a pull request.

---

License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Author

Babar Bilal

---

Support

If you find this library useful, please consider giving it a ⭐️ on GitHub.