React Native: VirtualizedList only rendering 10 items

virtualizedlist example
virtualizedlist react native
virtualized list react native example
virtualizedlist vs flatlist
how to use virtualized list in react native
virtualizedlist getitemcount
shoulditemupdate
react native flatlist performance

Why does this VirtualizedList only render the first 10 items when it should be rendering 365? If I pass a data variable with more than 10 items it works fine, but fails when I use the getItem method.

export default class ListTest extends Component {
  render() {
    return (
      <View>
        <VirtualizedList
          initialNumberToRender={20}
          windowSize={21}
          getItemCount={(data) => 365}
          getItem={(data, index) => {
            return { key: index };
          }}
          keyExtractor={(item, index) => {
            return item.key;
          }}
          renderItem={({ item, index }) => {
            return (
              <View style={{height:50}}>
                <Text>{item.key}</Text>
              </View>
            );
          }}
        />
      </View>
    );
  }
}

You have to still pass a data property when you give it a getItem. getItem is only an accessor to the data variable you pass. By default, getItem is defined as this:

 static defaultProps = {
    disableVirtualization: false,
    getItem: (data: any, index: number) => data[index],
    ...

VirtualizedList + getItemLayout only renders initialNumToRender , VirtualizedList + getItemLayout only renders initialNumToRender items #15734 react-native -v : 0.47.2; node -v : v6.10.3; npm -v : 3.10.10 Provide a data source that has more than initialNumToRender items; Render and  Determines the maximum number of items rendered outside of the visible area, in units of visible lengths. So if your list fills the screen, then windowSize={21} (the default) will render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing this number will reduce memory consumption and may improve performance, but will increase the chance that fast scrolling may reveal momentary blank areas of unrendered content.

data needs to be present.

class DataSource {
  getElementAtIndex (index) {
    return { key: index }
  }
}

const data = new DataSource()

function getItem (data, index) {
  return data.getElementAtIndex(index)
}

function getItemCount (data) {
  return 1000
}

const ComponentView = (props) => {
  return (
      <VirtualizedList
        data={data}
        style={{backgroundColor: 'red'}}
        // initialNumToRender={20}
        // maxToRenderPerBatch={}
        // windowSize={21}
        getItemCount={getItemCount}
        getItem={getItem}
        keyExtractor={(item, index) => {
          return item.key
        }}
        renderItem={({ item, index }) => {
          return (
            <View style={{height: 50, backgroundColor: 'yellow'}}>
              <Text>{item.key}</Text>
            </View>
          )
        }}
      />
  )
}

React Native: VirtualizedList only rendering 10 items, Why does this VirtualizedList only render the first 10 items when it should be rendering 365? If I pass a data variable with more than 10 items it works fine, but​  Reference Props windowSize. Determines the maximum number of items rendered outside of the visible area, in units of visible lengths. So if your list fills the screen, then windowSize={21} (the default) will render the visible screen area plus up to 10 screens above and 10 below the viewport.

If you need 20, you can try:

initialNumToRender={20}

rather than your:

initialNumberToRender={20}

It appears the API has changed:

VirtualizedList - React Native

How to optimize your react native flatlist - Sanjagh, When it comes to choosing react native over other frameworks specially VirtualizedList features like windowSize might not work as expected. hey flatlist​! render one screen for visible viewport with, 10 above and 10 The number of list items rendered initially, this porp accepts number Just $5/month. When populating a VirtualizedList using getItem() (i.e. not using data), the list only shows the first 10 items even if getItemCount() returns a number more than 10. This seems to happen irrespective of the setting of initialNumberToRender and windowSize .

VirtualizedList · React Native, In general, this should only really be used if you need more flexibility than The window adapts to scrolling behavior, and items are rendered will render the visible screen area plus up to 10 screens above and 10 below the viewport. Determines the maximum number of items rendered outside of the visible area, in units of visible lengths. So if your list fills the screen, then windowSize={21} (the default) will render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing this number will reduce memory consumption and may improve performance

Optimizing Flatlist Configuration · React Native, VirtualizedList: The component behind FlatList (React Native's Blank areas: When VirtualizedList can't render your items fast enough, you may enter significant memory because the views are not deallocated, only detached. Number, 10  Provide a data source that has more than initialNumToRender items; Render and scroll to bottom; Expected Behavior (Write what you thought would happen.) All items are rendered. Actual Behavior. Only initialNumToRender items are rendered. (Write what happened. Add screenshots!) Reproducible Demo. The bug is in VirtualizedList:

Getting a React Native FlatList to be Performant, My experience getting a react-native FlatList component to render without a The Open Movie Database API will return only ten titles at a time. In other words, on the first fetch it rendered 10 items, on the next fetch it It extends VirtualizedList which maintains a finite render window and replaces items  The default value is 21 (10 viewports above, 10 below, and one in between). Pros: Bigger windowSize will result in less chance of seeing blank space while scrolling. On the other hand, smaller windowSize will result in fewer items mounted simultaneously, saving memory.

Comments
  • I don't think I understand. If I don't use the data variable and override getItem(), why would it cause the list to be limited to 10 items?
  • @Nwah is correct you must pass a data prop to VirtualizedList component which will be rendered. The reason you are seeing 10 items rendered is because virtualized list will render 10 items in the window by default. Since your render item component doesn't actually access item data but only the key you are still getting a proper render. If you try to access item in the renderItem prop you will get a render error.