React-Native Flatlist getItemLayout with dynamic item height

Question

I am trying to implement a scrollToIndex function on a flatlist so that it scrolls to a specific item when it renders. The issue I am running into is that the items the flatlist renders have a minHeight. The issue with that is, the flatlist needs to implement a function to calculate the offset for every element. I cant think of a way to pre-render the flatlist and get the height of every item in it. As you can see I am simply adding a static number for the offset and that is not what I need.

<FlatList
  data={data}
  renderItem={this.renderItem}
  getItemLayout={(dat, index) => {
    let offset = 0;
    for (let i = 0; i < index; i++) {
      if (data[i].headerText) {
        offset += 33;
      } else {
        offset += 80;
      }
    }
    return { length: 0, offset, index }
  }
  }
  ref={(ref) => { this.flatListRef = ref; }}
/>

Answer 1

I followed @Tzvetlin Velev answer and here is an example: https://snack.expo.io/@drorbiran/scrolltoindex-with-random-item-heights-

I'm calculating each item height in onLayout and in getItemLayout I'm summing up the heights of all the elements above it.

Answer 2

The View that wraps each component rendered in the Flatlist can invoke a callback called onLayout which provides information about the component. You can manage a array on the context of a parent component that doesn't unmount with unique ids of every component(easy for me with relayjs' unique relay ids'. onLayout you can add its dimensions and reference id so that when you calculate the offset, you have those dimensions. When a component in the list unmounts you can remove it from that array.