MENU


<VirtualizedList>

Base implementation for the more convenient <FlatList> and <SectionList> components, which are also better documented. In general, this should only really be used if you need more flexibility than FlatList provides, e.g. for use with immutable data instead of plain arrays.

Virtualization massively improves memory consumption and performance of large lists by maintaining a finite render window of active items and replacing all items outside of the render window with appropriately sized blank space. The window adapts to scrolling behavior, and items are rendered incrementally with low-pri (after any running interactions) if they are far from the visible area, or with hi-pri otherwise to minimize the potential of seeing blank space.

Props(inherits ScrollView Props)CellRendererComponentItemSeparatorComponentListEmptyComponentListItemComponentListFooterComponentListFooterComponentStyleListHeaderComponentListHeaderComponentStyledebugdisableVirtualizationextraDatagetItemLayouthorizontalinitialNumToRenderinitialScrollIndexinvertedlistKeykeyExtractormaxToRenderPerBatchpersistentScrollbarprogressViewOffsetrefreshControlrefreshingremoveClippedSubviewsrenderScrollComponentviewabilityConfigviewabilityConfigCallbackPairsupdateCellsBatchingPeriodwindowSize Required Propsdata requiredgetItem requiredgetItemCount requiredrenderItem required
Methods.flashScrollIndicators().getChildContext().getScrollableNode().getScrollRef().getScrollResponder().hasMore().scrollToEnd().scrollToIndex().scrollToItem().scrollToOffset().recordInteraction().setNativeProps() Event PropsonEndReachedonEndReachedThresholdonRefreshonScrollToIndexFailedonViewableItemsChanged

RESETRUNFULL
import React from 'react';import { SafeAreaView, View, VirtualizedList, StyleSheet, Text, StatusBar }
                                                                                               from 'react-native';const DATA = [];const getItem = (data, index) => ({id: Math.random().toString(12).substring(0),
                                                     title: `Item ${index+1}`});const getItemCount = (data) => 50;const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>);const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <VirtualizedList data={DATA} initialNumToRender={4}
                             renderItem={({ item }) => <Item title={item.title} />}
                             keyExtractor={item => item.key}
                             getItemCount={getItemCount}
                             getItem={getItem} />
    </SafeAreaView>
  );}const styles = StyleSheet.create({
  container: {flex: 1, marginTop: StatusBar.currentHeight},
  item: {
    backgroundColor: '#f9c2ff',
    height: 150,
    justifyContent: 'center',
    marginVertical: 8,
    marginHorizontal: 16,
    padding: 20,
  },
  title: {fontSize: 32},});export default App;