InfiniteLoader -> List with dynamic heights

I’d like to echo what has been said here many times, thanks for a great set of components and for your dedication to helping people out with their problems. It took me a while to bend my brain around the infinite loading a list of items, but I’ve almost got there in the end.

One thing I am struggling with is a use case whereby I am loading up an infinite timeline. Each entry is of dynamic height which I won’t know until the data is fetched and the component is rendered. I’m within spitting distance of a (probably bad) solution, but not quite there.

I’m doing this in the higher container’s renderRow passed down into the list

<ReactHeight onHeightReady={height => this.heights[index] = height}>
  {content}
</ReactHeight>

I’m also passing down a rowHeight function rowHeight={({index}) => this.heights[index] || 60}

Problem is that this function gets called before loadMoreRows, therefore (obviously) there is no row rendered and no height to provide. I could live with that… it’ll be 60 for empty and placeholder rows.

The more pressing issue though, is that after the row data does get returned and rendered on screen, the rowHeight callback isn’t called. The rows stick at 60. That is, until I scroll the list a smidgen, then they all snap to their correct heights and it works fine from there on in.

Am I doing something wrong; is there a better way, or is it an issue with the InfiniteLoader/List?

[bvaughn]

Here’s a starter for you. It probably has bugs. I’m at work so I’m too busy to actually test it. 😄

class HowIImagineYourComponent extends Component {
  constructor(props, context) {
    super(props, context);

    this._heights = {};

    this._listRef = this._listRef.bind(this);
    this._rowHeight = this._rowHeight.bind(this);
    this._rowRenderer = this._rowRenderer.bind(this);
  }

  _listRef(ref) {
    this._list = ref;
  }

  _rowHeight({index}) {
    return this._heights.hasOwnProperty(index)
      ? this._heights[index]
      : 60;
  }

  _rowRenderer({index, key, style}) {
    const content; // You would set this somehow

    if (this._heights.hasOwnProperty(index)) {
      return (
        <div
          key={key}
          style={style}
        >
          {content}
        </div>
      );
    } else {
      // Maybe you don't need the wrapper <div>; I don't konw ReactHeight.
      return (
        <div
          key={key}
          style={style}
        >
          <ReactHeight
            key={key}
            onHeightReady={(height) => {
              this._heights[index] = height;
              this._list.recomputeRowHeights(index);
            }}
          >
            {content}
          </ReactHeight>
        </div>
      );
    }
  }

  render() {
    return (
      <List
        {...yourListProps}
        ref={this._listRef}
        rowHeight={this._rowHeight}
        rowRenderer={this._rowRenderer}
      />
    );
  }
}

[bvaughn]

You’re welcome!