https://github.com/erzhtor/react-native-virtualized

React Native Virtualized FlatList and SectionList components
https://github.com/erzhtor/react-native-virtualized

react-native react-native-infiinite-list react-native-virtualized

Last synced: about 1 year ago
JSON representation

React Native Virtualized FlatList and SectionList components

• Host: GitHub
• URL: https://github.com/erzhtor/react-native-virtualized
• Owner: erzhtor
• Created: 2019-10-22T21:57:17.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T06:28:49.000Z (over 3 years ago)
• Last Synced: 2025-04-28T02:19:19.210Z (about 1 year ago)
• Topics: react-native, react-native-infiinite-list, react-native-virtualized
• Language: TypeScript
• Size: 8.09 MB
• Stars: 8
• Watchers: 2
• Forks: 1
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
React Native `VirtualizedFlatList` and `VirtualizedSectionList` components.

- Both components use *FlatList* and *SectionList* from *react-native* under the hood

- Zero dependency

| VirtualizedFlatList | VirtualizedSectionList |

| - | - |

|  |  |

## Getting started

Install `react-native-virtualized`:

- `$ npm install react-native-virtualized`

or using yarn

- `$ yarn add react-native-virtualized`

## Usage

- **VirtualizedFlatList:**

  ```jsx

  import React from 'react';

  import { Text } from 'react-native';

  import { VirtualizedFlatList } from 'react-native-virtualized';

  export default function FlatListExample() {

      const items = Array(999999999).fill('Item ')

      return (

           item + index}

              data={items}

              renderItem={({ item, index }) => {`${item} - ${index}`}}

          />

      );

  }

  ```

- **VirtualizedSectionList:**

  ```jsx

  import React from 'react';

  import { Text } from 'react-native';

  import { VirtualizedSectionList } from 'react-native-virtualized';

  export default function SectionListExample() {

      const sections = Array(999999999).fill('Section ')

        .map((item, index) => ({

            title: item + index,

            data: Array(50).fill('Item ')

        }))

      return (

           item + index}

              renderItem={({ item, index }) => {`${item} - ${index}`}}

              renderSectionHeader={({ section }) => {section.title}}

          />

      );

  }

  ```

## Props

- For both `VirtualizedFlatList` and `VirtualizedSectionList`

| Name | Required | Default | Description |

| - | - | - | - |

| `batch` | *No* | 10 | Number of items to load on scroll to end |

**Note:** Rest of the props are passed to the underlying `FlatList|SectionList` component. It means all required by underlying component (*FlatList|SectionList*) props should be passed as usual.

## License

*react-native-virtualized* is available under the MIT License.