JSPM – react-native-big-list@1.0.0

Package Exports

react-native-big-list

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-big-list) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

If this project has helped you out, please support us with a star 🌟

📘 Description

Author: Marco Cesarato

Github: https://github.com/marcocesarato/react-native-big-list

A big and fast list implementation for react-native with a recycler API focused on performance and ram usage while processing thousand items on the list.

Compatible with: Android, iOS, Windows, Web and Expo.

📖 Install

Install the library from npm or yarn just running one of the following command lines:

npm	yarn
`npm install react-native-big-list --save`	`yarn add react-native-big-list`

💻 Usage

Standard List (array of items)

import BigList from "react-native-big-list";

// ...

// Data array
const data = [
  { label: "1", value: 1 /* ... */ },
  { label: "2", value: 2 /* ... */ },
  { label: "3", value: 3 /* ... */ },
  { label: "4", value: 4 /* ... */ },
  { label: "5", value: 5 /* ... */ },
  // ...
];

// Example
const renderItem = ({ item, index }) => <MyListItem item={item} />;
const renderEmpty = () => <MyEmpty />;
const renderHeader = () => <MyHeader />;
const renderFooter = () => <MyFooter />;

return (
  <BigList
    data={data}
    // Item
    itemHeight={50} // Item height
    renderItem={renderItem}
    // Empty (optional)
    renderEmpty={renderEmpty}
    // Header (optional)
    headerHeight={90} // Header height
    renderHeader={renderHeader}
    // Footer (optional)
    footerHeight={100} // Header footer
    renderFooter={renderFooter}
  />
);

Section List (array with inside arrays of items)

This list will auto stick the section rendered on the top of the list

import BigList from "react-native-big-list";

// ...

// Data array
const sections = [
  [
    // Section 1
    { label: "1", value: 1 /* ... */ },
    { label: "2", value: 2 /* ... */ },
  ],
  [
    // Section 2
    { label: "3", value: 3 /* ... */ },
    { label: "4", value: 4 /* ... */ },
  ],
  [
    // Section 3
    { label: "6", value: 6 /* ... */ },
    { label: "6", value: 6 /* ... */ },
  ],
  // ...
];

// Example
const renderItem = ({ item, section, row }) => <MyListItem item={item} />;
const renderHeader = () => <MyHeader />;
const renderFooter = () => <MyFooter />;
const renderSectionHeader = () => <MySectionHeader />;
const renderSectionFooter = () => <MySectionFooter />;

return (
  <BigList
    sections={sections}
    // Item
    itemHeight={50} // Item height
    renderItem={renderItem}
    // Header (optional)
    headerHeight={90} // Header height
    renderHeader={renderHeader}
    // Footer (optional)
    footerHeight={100} // Footer footer
    renderFooter={renderFooter}
    // Section (optional)
    sectionHeight={90} // Section header height
    renderSection={renderSectionHeader}
    // Section Footer (optional)
    sectionFooterHeight={100} // Section footer height
    renderSectionFooter={renderSectionFooter}
  />
);

For more examples check the example directory the list directory

🎨 Screenshots

BigList vs FlatList	Section List

⚡️ Example

Expo

Clone or download repo and after:

cd Example
yarn install # or npm install
expo start

Open Expo Client on your device. Use it to scan the QR code printed by expo start. You may have to wait a minute while your project bundles and loads for the first time.

💡 Props List

Big list have the same properties of the ScrollView with some more additional:

Property	Description	Type	Default
`data`	For simplicity, data is a plain array containing the items to render.	Array	`[]`
`sections`	For simplicity, sections is a plain array containing another plain array with the items (section items) to render. If specified `data` prop will be ignored.	Array	`[]`
`renderItem({ item, index/section, row })`	Takes an item from data and renders it into the list.	Function
`renderHeader()`	Rendered at the top of all the items.	Function
`renderFooter()`	Rendered at the bottom of all the items.	Function
`renderActionSheetScrollViewWrapper()`	Wrap the entire list into an accessory component.	Function
`renderAccessory()`	Rendered at the bottom of the list an accessory.	Function
`renderEmpty()`	Rendered when the list is empty.	Function
`renderSection(section)`	Rendered at the top of all the section items.	Function
`renderSectionFooter(section)`	Rendered at the bottom of all the section items.	Function
`itemHeight`	Specify the item height	Number/Function	`50`
`headerHeight`	Specify the header height	Number/Function	`0`
`footerHeight`	Specify the footer height	Number/Function	`0`
`sectionHeight`	Specify the section height	Number/Function	`0`
`sectionFooterHeight`	Specify the section footer height	Number/Function	`0`
`scrollTopValue`	Specify the initial scroll from the top of the list	Number
`insetTop`	Specify the top inset	Number	`0`
`insetBottom`	Specify the bottom inset	Number	`0`
`contentInset`	Specify the content inset	Object	`{ top: 0, right: 0, left: 0, bottom: 0 }`

🤔 How to contribute

Have an idea? Found a bug? Please raise to ISSUES. Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.