erzhtor/react-native-virtualized


React Native Virtualized FlatList and SectionList components

Language: TypeScript

Keywords: react-native, react-native-infiinite-list, react-native-virtualized


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:

    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 (
            <VirtualizedFlatList
                keyExtractor={(item, index) => item + index}
                data={items}
                renderItem={({ item, index }) => <Text>{`${item} - ${index}`}</Text>}
            />
        );
    }
  • VirtualizedSectionList:

    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 (
            <VirtualizedSectionList
                sections={sections}
                keyExtractor={(item, index) => item + index}
                renderItem={({ item, index }) => <Text>{`${item} - ${index}`}</Text>}
                renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
            />
        );
    }

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.

Project Statistics

Sourcerank 1
Repository Size 7.5 MB
Stars 0
Forks 0
Watchers 1
Open issues 0
Dependencies 1,176
Contributors 1
Tags 0
Created
Last updated
Last pushed

Top Contributors See all

Erzhan Torokulov

Packages Referencing this Repo

react-native-virtualized
React Native Virtualized FlatList and SectionList components
Latest release 1.0.0 - Published

Something wrong with this page? Make a suggestion

Last synced: 2019-10-23 13:04:45 UTC

Login to resync this repository