A High Performance List View for React Native

A High Performance List View for React Native

This is 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 items on the list.

React Native Big List

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

📘 Description

What is this?

This is 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 items on the list.

Try it on the published demo web app (sticky headers at the moment doesn't work on web version): https://marcocesarato.github.io/react-native-big-list/

Why another list library?

React Native's FlatList is great but when it comes to big lists it has some flaws because of its item caching. Exists some alternatives like react-native-largelist and recyclerlistview but both have some issues.

The react-native-largelist isn't compatible with web and Expo, has native code that sometimes need to be readjusted and maintained, have a weird list item recycles (because it never has blank items), need data restructure and have some issues when trying to process a lot of data (eg: 100,000 items) because it would freeze the CPU.

The recyclerlistview is performant but suffers from an empty frame on mount, weird scroll positions when trying to scroll to an element on mount, and the implementation of sticky headers conflicts with Animated.

How it works?

Recycler makes it easy to efficiently display large sets of data. You supply the data and define how each item looks, and the recycler library dynamically creates the elements when they're needed. As the name implies, the recycler recycles those individual elements. When an item scrolls off the screen, the recycler doesn't destroy its view. Instead, the recycler reuses the view for new items that have scrolled onscreen. This reuse vastly improves performance, improving your app's responsiveness and reducing power consumption.

When list can't render your items fast enough the non-rendered components will appear as blank space.

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

Read also How to migrate from FlatList

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

PS: Sticky headers at the moment doesn't work on web version

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

Big list have the same properties of the ScrollView Props with some more additional specific BigList Props pretty similar to FlatList.

🤔 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.

Download Details:

Author: marcocesarato The Demo/Documentation: View The Demo/Documentation Download Link: Download The Source Code Official Website: https://github.com/marcocesarato/react-native-big-list License: GPL-3.0

react-native mobile-apps react

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native App Developers India, React Native App Development Company

Hire React Native app developers India from a preferred React Native app development company by innovative industry leaders. Let's Discuss Your Project.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.