📜 Description

Added workaround for non-working scrollToEnd method for virtualized lists.

💡 Motivation and Context

This code in FlatList causes a problem:

  // scrollToEnd may be janky without getItemLayout prop
  scrollToEnd(params?: ?{animated?: ?boolean, ...}) {
    const animated = params ? params.animated : true;
    const veryLast = this.props.getItemCount(this.props.data) - 1;
    if (veryLast < 0) {
      return;
    }
    const frame = this._listMetrics.getCellMetricsApprox(veryLast, this.props);
    const offset = Math.max(
      0,
      frame.offset +
        frame.length +
        this._footerLength -
        this._scrollMetrics.visibleLength,
    );

    // TODO: consider using `ref.scrollToEnd` directly
    this.scrollToOffset({animated, offset});
  }

So this function doesn't consider keyboard offset and because of that scrolls to wrong offset when keyboard is shown.

In this PR I explained how to pass a ref directly to underlying ScrollView and use scrollToEnd of ScrollView level. Additionally in example project I started to use it as well.

Closes #1357

📢 Changelog

JS

• pass scrollRef to VirtualizedList in example appl
• use scrollTo from ScrollView ref;

Docs

• added a new item to troubleshooting guide;

🤔 How Has This Been Tested?

Tested manually in exampel app (paper/fabric).

📝 Checklist

• CI successfully passed
• I added new mocks and corresponding unit-tests if library API was changed