erzhtor / react-native-virtualized Goto Github PK

React Native VirtualizedFlatList and VirtualizedSectionList components.

• Both components use FlatList and SectionList from react-native under the hood
• Zero dependency

VirtualizedFlatList	VirtualizedSectionList

Install react-native-virtualized:

• $ npm install react-native-virtualized or using yarn
• $ yarn add react-native-virtualized

• 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>}
          />
      );
  }

• For both VirtualizedFlatList and VirtualizedSectionList

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.

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