React Native Dynamic Flatlist Library

A powerful and dynamic FlatList wrapper for React Native that provides enhanced functionality out of the box. This library simplifies creating complex lists with features like pagination, sorting, grid layouts, search.

Features

• Normal List: Render a standard vertical or horizontal list.
• Pagination: Load data incrementally as the user scrolls.
• Sorting: Dynamic sorting options:
  • A to Z
  • Z to A
  • 1 to Nth (ascending numerical order)
  • Nth to 1 (descending numerical order)
• Sorting with Pagination: Combine sorting and pagination for large datasets.
• Vertical List: Default vertical scrolling list.
• Horizontal List: Render items in a horizontally scrollable list.
• Grid Layout: Support for dynamic number of columns in a grid layout.
• Search Bar: Include a TextInput for search functionality at the top of the list.
• Search with Pagination: Filter and paginate data simultaneously.

Installation

Install the library via npm:

npm install react-native-dynamic-flatlist

Or with Yarn:

yarn add react-native-dynamic-flatlist

Usage

Basic Example

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import CustomFlatList from "react-native-dynamic-flatlist";

const App = () => {
  const data = [...Array(50).keys()].map((i) => ({ id: i, name: `Item ${i}` }));

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item.name}</Text>
    </View>
  );

  return (
    <CustomFlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id.toString()}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 10,
    borderWidth: 1,
    borderColor: "#ccc",
    margin: 5,
  },
});

export default App;

Advanced Usage

Pagination

<CustomFlatList
  data={data}
  renderItem={renderItem}
  paginationEnabled={true}
  onPaginate={(page, currentData) => {
    // Fetch the next set of data based on `page` and return updated data
    return [...currentData, ...fetchNewData(page)];
  }}
/>

Sorting

<CustomFlatList
  data={data}
  renderItem={renderItem}
  sortingOptions={["a-to-z", "z-to-a", "1-to-n", "n-to-1"]}
  onSort={(option, data) => {
    if (option === "a-to-z") {
      return data.sort((a, b) => a.name.localeCompare(b.name));
    }
    if (option === "z-to-a") {
      return data.sort((a, b) => b.name.localeCompare(a.name));
    }
    return data;
  }}
/>

Grid Layout

<CustomFlatList data={data} renderItem={renderItem} layout="grid" columns={3} />

Search with Pagination

<CustomFlatList
  data={data}
  renderItem={renderItem}
  searchEnabled={true}
  onSearch={(query, data) => {
    return data.filter((item) =>
      item.name.toLowerCase().includes(query.toLowerCase())
    );
  }}
  paginationEnabled={true}
  onPaginate={(page, currentData) => {
    // Fetch and return paginated data based on search query
    return [...currentData, ...fetchSearchResults(query, page)];
  }}
/>

Props

| Prop | Type | Default | Description | | ------------------- | -------- | --------- | -------------------------------------------------------- | | data | Array | [] | The data to render in the list. | | renderItem | Function | undefined | A function that returns a component to render each item. | | keyExtractor | Function | undefined | A function to extract unique keys for each item. | | paginationEnabled | Boolean | false | Enable or disable pagination. | | sortingOptions | Array | null | Array of sorting options. | | searchEnabled | Boolean | false | Enable or disable the search bar. | | layout | String | vertical | Layout type (vertical, horizontal, grid). | | columns | Number | 1 | Number of columns for grid layout. | | onSearch | Function | null | Callback function for search functionality. | | onSort | Function | null | Callback function for sorting. | | onPaginate | Function | null | Callback function for pagination. |

License

This library is licensed under the MIT License.

🔍 Keywords

• react-native
• scrollView
• view
• loader
• pagination
• sorting
• horizontal
• vertical
• grid
• search