ScrollToIndex does not scroll the FlatList as expected - react-native

Question

I have a FlatList setup like so
<FlatList
style={styles.listContainer}
data={this._formatList()}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
ItemSeparatorComponent={this.renderSeparator}
nestedScrollEnabled
showsVerticalScrollIndicator={false}
extraData={this.state}
ref={this._setRef}
/>
I also have these following two relevant functions in my component
_setRef = (ref) => {
this._listref = ref;
}
_scrollToTop = () => {
this._listref.scrollToIndex({ index: 0, animated: true });
}
I have checked that the this._listref is setup correctly when FlatList is rendered.
The function _scrollToTop is called from a button click (and it is indeed called).
For some reason the list does not scroll to top as expected.
I have tried various options playing with viewOffset / viewPosition.
It seems no scrolling action is taking place.
This is an expo project with "sdkVersion": "33.0.0"
and React and RN as follows from package.json
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
Thanks.

Answer 1

From the docs: https://facebook.github.io/react-native/docs/flatlist#scrolltoindex
Note: Cannot scroll to locations outside the render window without
specifying the getItemLayout prop.
So you'll need to implement getItemLayout for scrolling to the top to work properly with scrollToIndex since most certainly it will be outside of the current render window.
You could alternatively use scrollToOffset: https://facebook.github.io/react-native/docs/flatlist#scrolltooffset with a param of {offset: 0} instead.

Answer 2

Have you tried using offset?
this.listRef.getNode().scrollToOffset({ offset: 0, animated: true });
OR
this.listRef.scrollToOffset({ animated: true, offset: 0 });
Trying using this and I hope this will work assuming that you've correctly set up the reference of the scrollview and passing that correctly in the function.