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.

Answer 1

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