React-native: [FlatList] `scrollToIndex () `

[LiuCao]

• RN 0.44.0
  -Description
  FlatList uses scrollToIndex () to scroll to the last few elements, and the element leaves the bottom of the list. And when scrolling to the last element, it is reported scrollToIndex should be used in conjunction with getItemLayout otherwise there is no way to know the location of an arbitrary index. error.
  e.g.
  

[LiuCao]

I have a solution, but modified the framework file, so it is not recommended to do so. And I do not know if it will cause other issue

• /your Project/node_modules/react-native/Libraries/Lists/VirtualizedList.js

// scrollToIndex may be janky without getItemLayout prop
  scrollToIndex(params: {animated?: ?boolean, index: number, viewPosition?: number}) {
    const {data, horizontal, getItemCount, getItemLayout} = this.props;
    const {animated, index, viewPosition} = params;
    invariant(
      index >= 0 && index < getItemCount(data),
      `scrollToIndex out of range: ${index} vs ${getItemCount(data) - 1}`,
    );
    // invariant(
    //   getItemLayout || index < this._highestMeasuredFrameIndex,
    //   'scrollToIndex should be used in conjunction with getItemLayout, ' +
    //     'otherwise there is no way to know the location of an arbitrary index.',
    // );
    const frame = this._getFrameMetricsApprox(index);
    let offset;
    if((frame.offset - frame.length + this._scrollMetrics.visibleLength) 
          >= this._totalCellLength){
      offset = this._totalCellLength - this._scrollMetrics.visibleLength;
    }else{
      offset = Math.max(
        0,
        frame.offset - (viewPosition || 0) * (this._scrollMetrics.visibleLength - frame.length),
      );
    }
    this._scrollRef.scrollTo(horizontal ? {x: offset, animated} : {y: offset, animated});
  }

[annelorraineuy]

I am seeing this issue as well, but on a horizontal Flatlist. The last item could leave the screen and doesn't lock at the "bottom" _(or in the case of my horizontal Flatlist, on the right)_.

[hramos]

Hey, thanks for reporting this issue!

It looks like your description is missing some necessary information. Can you please add all the details specified in the template? This is necessary for people to be able to understand and reproduce the issue being reported.

I am going to close this, but feel free to open a new issue with the additional information provided. Thanks!

[MichaelPintos]

i have this bug in RN 0.45.1

[wj495175289]

scrollToIndex(params: {animated?: ?boolean, index: number, viewPosition?: number}) {
const {data, horizontal, getItemCount, getItemLayout} = this.props;
const {animated, index, viewPosition} = params;
invariant(
index >= 0 && index < getItemCount(data),
scrollToIndex out of range: ${index} vs ${getItemCount(data) - 1},
);
// invariant(
// getItemLayout || index < this._highestMeasuredFrameIndex,
// 'scrollToIndex should be used in conjunction with getItemLayout, ' +
// 'otherwise there is no way to know the location of an arbitrary index.',
// );
const frame = this._getFrameMetricsApprox(index);
let offset;
if(Platform.OS == 'ios' && (frame.offset - frame.length + this._scrollMetrics.visibleLength - (params.iosOffset || 0))

= this._totalCellLength){
//offset = this._totalCellLength - this._scrollMetrics.visibleLength -64;
this.scrollToEnd(animated);
return;
}else{
offset = Math.max(
0,
frame.offset - (viewPosition || 0) * (this._scrollMetrics.visibleLength - frame.length),
) - (params.range || 0);
}
this._scrollRef.scrollTo(horizontal ? {x: offset, animated} : {y: offset, animated});
}

range: can set for absolute layout
iosOffset:also can set for header or fotter,iosOffset is header height
iosOffset = this._headerLength;

[martinezguillaume]

I have this bug on 0.50.3, when scrollTo is scrolling at the end of the FlatList 😔

[spedy]

I just added

onScrollToIndexFailed={()=>{}}

and it worked just fine