react-native listview some rows not displaying

Question

I have a modal with 3 tabs. Each tab has a listview, any dataset larger than 10 rows does not work properly. What happens is on initial load it is displaying correctly. however when more rows are being displayed they are all empty. Not sure what is going on. Using latest React-Native. Here are a couple of screenshots if it helps.

 <View style={{flex:1, height: this.state.visibleHeight - 100, width: this.state.visibleWidth }}>
    {
      (this.state.isSubdivisions) ? <Subdivisions model={this.props.model.subdivisions}/>
      : (this.state.isProspects) ? <LandProspects model={this.props.model.landProspects}/>
      : (this.state.isFavorites) ? <Favorites model={this.props.model.favorites}/>
      : null}
</View>

Tab

class ListLandProspects extends Component {
  constructor(props) {
    super(props);
    const foo = this.props.model.slice(0,10)
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
    this.state = {
      dataSource: ds.cloneWithRows(foo),
      deviceHeight: Dimensions.get('window').height,
      deviceWidth: Dimensions.get('window').width
    }
  }

  componentDidUpdate(prevProps) {
    if (this.props.model != prevProps.model)
    this._updateLandProspects()
  }

  _updateLandProspects(){
    const clone = this.props.model.slice()
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(clone)
    })
  }

  render() {
    return (
      <Row>
        <Col>
          <List>
            <ListView
              style={{ height: this.state.visibleHeight - 100, width: this.state.visibleWidth }}
              enableEmptySections={true}
              initialListSize={10}
              pageSize={10}
              dataSource={this.state.dataSource}
              renderRow={this._renderRow.bind(this)} />
          </List>
        </Col>
      </Row>
    )
  }

  _renderRow(rowData) {
    return (
      <ListItem style={styles.listItem}>
        <View style={styles.rowWrapper}>
          <Row>
            <Col>
              <Text style={styles.labelMain}>{rowData.fullAddress}</Text>
            </Col>
          </Row>
          <Row style={styles.toolbarRow}>
            <View style={styles.toolbarDetail}>
              <TouchableOpacity>
                <Icon
                  name='ios-information-circle'
                  style={{color: colors.blue}}/>
              </TouchableOpacity>
            </View>
            <View style={styles.toolbarMarker}>
              <TouchableOpacity>
                <Icon
                  name='ios-pin'
                  style={{color: colors.green}}/>
              </TouchableOpacity>
            </View>
            <View style={styles.toolbarFavorite}>
              <TouchableOpacity>
                <Icon
                  name={rowData.isFavorite ? 'ios-star' : 'ios-star-outline'}
                  style={{color: colors.orange}}/>
              </TouchableOpacity>
            </View>
          </Row>
        </View>
      </ListItem>
    )
  }
}


ListLandProspects.propTypes = {
  model: React.PropTypes.array
}

export default connect(null, null)(ListLandProspects)

Styles

const styles = StyleSheet.create({
  label: {
    color: '#000',
    fontWeight: 'bold'
  },
  labelMain: {
    color: '#000',
    fontWeight: 'bold',
    fontSize: 15
  },
  rowWrapper: {
    padding: 5,
    paddingLeft: 10,
    paddingRight: 10
  },
  listItem: {
    padding: 0,
    marginLeft: 0,
    paddingLeft: 0,
    borderBottomWidth: 0,
    borderColor: 'transparent'
  },
  toolbarRow: {
    height: 38,
    marginTop: 5,
    backgroundColor: '#f2f2f2'
  },
  toolbarFavorite: {
    position: 'absolute',
    margin: 5,
    left: 110
  },
  toolbarMarker: {
    position: 'absolute',
    margin: 5,
    left: 60
  },
  toolbarDetail: {
    position: 'absolute',
    margin: 5

  }
})

Answer 1

any dataset larger than 10 rows does not work properly

Almost certainly related to this line:

const foo = this.props.model.slice(0,10)

EDIT:

I think your componentDidUpdate is flawed. this.props.model != prevProps.model will always be true, because you can't compare arrays like that. So _updateLandProspects will be called on every update, which will re-set your state and since you have an initialListSize of 10 you'll probably never see more than that number since it will cause another render over and over again.

Try changing initialListSize to a bigger number and remove the slice(0, 10) above and see if it behaves the same as now but with that bigger number. This should show if the problem is with the componentDidUpdate flaw or not.