Why is this ListView only showing 10 items?

Question

(I know there are sites for sharing reactnative examples but I have not been able to find them via google; "react native share code" just comes up with the code for the sharing button, same for "example" -- what's a good site to use for this?)

I have a listview (thanks to this answer, credit to @colin-ramsay). What I'd like to do is put some items inside of each listview and get them to align inside of their containers (a checkbox and a label on the same line). But I can't get that far because I can't figure out why this array of 20 items is only showing 10 items.

The alert shows 20 items (0-19) when it fires off.

Code:

import React, {Component} from 'react';
import {View, Text, StyleSheet, ListView} from 'react-native';

var styles = StyleSheet.create({
  container:{
    marginTop:65,
    margin:10, backgroundColor:"#DDDDEE"
  },
  list:{
    height:400,
    marginTop:40,
    flexDirection:'row',
    flexWrap:'wrap', justifyContent:'center', alignItems:'flex-start'
  },
  item:{
    alignItems:'flex-start',
    backgroundColor:'red', width:40, height:40, margin:3, padding:3,
    justifyContent:'center', alignItems:'center'
  }
});

class TestCmp extends Component {

  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2});
    var data = Array.apply(null, {length:20}).map(Number.call, Number);
    alert(data);
    this.state = {dataSource:ds.cloneWithRows(data)};
  }

  render() {
    return (

      <ListView contentContainerStyle={styles.list} dataSource={this.state.dataSource} renderRow={
        (rowData) => {
          return (
            <View style={styles.item}>
              <Text>{rowData}</Text>
            </View>
          )
        }
      }/>
    );
  }
}

export default class TestPage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TestCmp/>
      </View>
    )
  }
}

What happened to the other 10 items? I've tried using the inspector and changing the height of the container and nothing has worked.

Jickson · Accepted Answer · 2016-11-21T04:24:02.327

ReactNative ListView component calculates how many rows to render on initial component mount using initialListSize property. By default the initialListSize is set to 10.

For reference, See the below function from ReactNative ListView source code,

  var DEFAULT_INITIAL_ROWS = 10;      
  getDefaultProps: function() {
    return {
      initialListSize: DEFAULT_INITIAL_ROWS,
      pageSize: DEFAULT_PAGE_SIZE,
      renderScrollComponent: props => <ScrollView {...props} />,
      scrollRenderAheadDistance: DEFAULT_SCROLL_RENDER_AHEAD,
      onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,
      stickyHeaderIndices: [],
    };
  }

If you want to make ListView render all items by default then you can make use of initialListSize property in ListView component like below code

<ListView contentContainerStyle={styles.list}
                initialListSize={20}
                dataSource={this.state.dataSource} renderRow={
        (rowData) => {
          return (
            <View style={styles.item}>
              <Text>{rowData}</Text>
            </View>
          )
        }
      }/>

Well that's completely goofy. That container is huge -- why would it decide to just randomly only display some of the items when the page is completely empty otherwise? Would I be better off just using `Array.map` with a `View` element? Seems simpler and doesn't have funny rules. — jcollum, Nov 20 '16 at 21:49
Yes. If number of elements are not much there is no reason to use ListView. — Jickson, Nov 21 '16 at 04:05
Main benefit of using ListView is render optimizations so setting `initialListSize` to item count makes it absolutely useless. For complex list items even 10 initial renders may be enough to make ui unresponsive. — farwayer, Nov 21 '16 at 09:14

score 0 · Answer 2 · answered Nov 21 '16 at 09:04

ListView determines visible rows based on item height (for vertical list) or item width (for horizontal list). You have vertical list (horizontal={false}) so for ListView you layout looks like this:

And ListView render 10 items because it is minimal render count by default (initialListSize).

You should manually place items in rows and render rows in ListView or search any grid view component.

Why is this ListView only showing 10 items?

2 Answers2