High Performance List View For React Native - Big List

Description:

A high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement.

This list implementation for big list rendering on React Native works with a recycler focused on performance and memory usage and so it permits processing thousands of items on the list.

How to use it:

1. Install and import the Big List.

# Yarn
$ yarn add react-native-big-list

# NPM
$ npm i react-native-big-list –save

import BigList from “react-native-big-list”;

2. Basic usage.

const MyExample = ({ data }) => {
  const renderItem = ({ item, index }) => <MyListItem item={item} />;
  return <BigList data={data} renderItem={renderItem} itemHeight={50} />;
};

3. Advanced usage.

const data = [
  { label: "1", value: 1 /* ... */ },
  { label: "2", value: 2 /* ... */ },
  { label: "3", value: 3 /* ... */ },
  { label: "4", value: 4 /* ... */ },
  { label: "5", value: 5 /* ... */ },
];
const renderItem = ({ item, index }) => (
  <MyListItem label={item.label} value={item.value} />
);
const renderEmpty = () => <MyEmpty />;
const renderHeader = () => <MyHeader />;
const renderFooter = () => <MyFooter />;
return (
  <BigList
    data={data}
    renderItem={renderItem}
    renderEmpty={renderEmpty}
    renderHeader={renderHeader}
    renderFooter={renderFooter}
    itemHeight={50}
    headerHeight={90}
    footerHeight={100}
  />
);

4. Available component props.

// Data
data: [],
sections: null,
// Renders
renderItem: () => null,
renderHeader: () => null,
renderFooter: () => null,
renderSectionHeader: () => null,
renderSectionFooter: () => null,
// Height
itemHeight: 50,
headerHeight: 0,
footerHeight: 0,
sectionHeaderHeight: 0,
sectionFooterHeight: 0,
// Scroll
stickySectionHeadersEnabled: true,
removeClippedSubviews: false,
scrollEventThrottle: Platform.OS === "web" ? 5 : 16,
// Keyboard
keyboardShouldPersistTaps: "always",
keyboardDismissMode: "interactive",
// Insets
insetTop: 0,
insetBottom: 0,
contentInset: { top: 0, right: 0, left: 0, bottom: 0 },