Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Infinite List with React Native (OnRender: How to rerender the Infinite Scroll Widget)
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 =, index) => {
return {
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

johuder33 commented Jan 10, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment