Infinite List with React Native (OnRender: How to rerender the Infinite Scroll Widget)

infinitelist-onrender.js

updateRenderModel(contentOffset) {
  var listItemHeight = ITEM_SIZE;
  // Use contentOffset to calculate first visible dataItem as y-position / height of item
  var firstVisibleItem = Math.max(0, Math.floor(contentOffset.y / listItemHeight));
  var renderModelSize = BUFFER_ITEMS * 2 + DISPLAY_ITEMS;
  // Calculate first y-position
  var nextPosition = (firstVisibleItem - BUFFER_ITEMS) * listItemHeight;
  // Subset of dataModel to be rendered.
  var dataItems = this.state.dataModel.slice(firstVisibleItem, firstVisibleItem + renderModelSize);
  var newRenderModel = dataItems.map((dataItem, index) => {
    return {
      key: dataItem.id,
      data: dataItem.data,
      position: nextPosition + index * listItemHeight
    }
  });
  // update renderModel, as well as bodyHeight of scroll area to encompass the largest y value
  var state = {
    renderModel: newRenderModel,
    dataModel  : this.state.dataModel,
    bodyHeight : nextPosition + renderModelSize * listItemHeight
  };
  this.setState(state);
}

Hi @viviancromwell, I did read your post, and it seemed to me really great, I was try to implement the things that you has written in that post, so I am a little confused, because the code above, you has declared two constants, these are BUFFER_ITEMS and DISPLAY_ITEMS, but I don't understand what you refer with theses variables. I really appreciate your answer. Thank you.