react-native-big-list
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.16 • Public • Published
    React Native Big List

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


    NPM version js-prittier-style Compatibility

    Documentation

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

    You can also try it on the published web app: Demo

    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.

    This library is fully JS native, so it's compatible with all available platforms: Android, iOS, Windows, MacOS, 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

    Basic example:

    import BigList from "react-native-big-list";
    // ...
    const MyExample = ({ data }) => {
      const renderItem = ({ item, index }) => <MyListItem item={item} />;
      return <BigList data={data} renderItem={renderItem} itemHeight={50} />;
    };

    For more examples check the example directory the list directory or check the Documentation

    🎨 Screenshots

    BigList vs FlatList Section List

    ⚡️ Example

    Snippets

    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.

    You can also try it on the published web app: Demo

    💡 Props and Methods

    The list has the same props of the ScrollView in addition to its specific Props and Methods.

    🤔 How to contribute

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


    Install

    npm i react-native-big-list

    DownloadsWeekly Downloads

    397

    Version

    1.3.16

    License

    GPL-3.0-or-later

    Unpacked Size

    467 kB

    Total Files

    52

    Last publish

    Collaborators

    • avatar