scroll to bottom/row on react-virtualized with autosizer and cellmeasurer

Question

I am building a chat app and using react-virtualized to manage display / infinite load (through a custom method, not the HOC) of chat messages. I am using Autosizer to fill the container div, and cellmeasurer to calculate row heights. Everything is working great except when I attempt to scroll down to the last/newest message at the bottom of the list, it takes me allllmost there. Typically the next to bottom row is visible and I need to scroll down just a bit more to see the actual bottom row.

Here are relevant snippets:

Render Method:

render() {
    const hasNextPage = this.props.contact ? this.props.contact.messages.length < this.props.contact.totalMessageCount : false
    // const totalMessageCount = this.props.contact ? this.props.contact.totalMessageCount : 0
    const contactMessages = this.props.contact ? sortBy(this.props.contact.messages, "created_at") : []
    const rowCount = contactMessages.length // hasNextPage ? contactMessages.length + 1 : contactMessages.length

    // auto resizer copy-spiration
    // https://github.com/bvaughn/tweets/blob/37d0139736346db16b9681d5b859a4e127964518/src/components/TweetList.js#L126-L132
    const _rowRenderer = ({ index, key, parent, style }) => {
      let content;
      if (index === 0 && hasNextPage) {
        content = 'Loading...'
      } else {
        content = <ChatMessage message={contactMessages[index]} />
      }

      return (
        <CellMeasurer
          cache={this._cache}
          columnIndex={0}
          key={key}
          parent={parent}
          rowIndex={index}
          width={this._mostRecentWidth}
        >
          <div
            key={key}
            style={style}
          >
            {content}
          </div>
        </CellMeasurer>
      );
    };

    return (
      <div style={{ height: '65vh' }}>
        <AutoSizer>
          {({ height, width }) => (
            <List
              deferredMeasurementCache={this._cache}
              // eslint-disable-next-line no-return-assign
              ref={ref => this.chatWindow = ref}
              onRowsRendered={(renderData) => this.handleRowsRendered(renderData, hasNextPage, rowCount)}
              rowRenderer={_rowRenderer}
              height={height}
              width={width}
              rowHeight={this._cache.rowHeight}
              rowCount={rowCount}
            />
          )}
        </AutoSizer>

      </div>
    )
  }

And my call to scroll on componentDidUpdate:

componentDidUpdate() {
    if (this.chatWindow && !this.state.initialized && this.props.contact) {
      // this.chatWindow.recomputeRowHeights(this.props.contact.messages.length - 10)
      this.chatWindow.scrollToRow(this.props.contact.messages.length || 0)
    }
  }

Any ideas how I can achieve that list little amount of scroll to make the bottom message visible?

Answer 1

I was having same problem in List solved it by using hack of setting an estimatedRowSize parameter to my average row size value.

<List     
 rowHeight={this.getRowHeight}
 rowRenderer={this.rowRenderer}
 onRowsRendered={this.onRowsRendered}
 rowCount={totalRows}
 // Row size It may vary in my case it is 44.5. 
 // Also it doesnt need to be exact.
 //Approx value will work but estimated row size should not be less than actual row height. 
 estimatedRowSize={44.5}
 overscanRowCount={10}
 height={height}
 width={width}
/>