CODEWITHSUNDEEP
react-native
mathew
mathew

Reputation: 987

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

Upvotes: 2

Views: 12028

Answers (3)

Patrice Gagnon
Patrice Gagnon

Reputation: 1464

If you need 20, you can try:

initialNumToRender={20}

rather than your:

initialNumberToRender={20}

It appears the API has changed:

VirtualizedList - React Native

Upvotes: 0

Gaston Morixe
Gaston Morixe

Reputation: 847

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

Upvotes: 7

Ramzi C.
Ramzi C.

Reputation: 1731

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],
    ...

Upvotes: 2

Related Questions