HighLight / ScrollTo - ListView, ScrollView on React-Native

The ScrollView does not provide a method to scroll to a specific list item - but it does provide the methods scrollTo({x, y, animated}).

If your list items are of equal height, you can use them to implement scrolling to a specific item by calling scrollTo({y:itemIndex * ROW_HEIGHT}).

In order to be able to access the ScrollView instance, you need to capture using the ref property callback:

<ScrollView ref={view => this._scrollView = view} />

And set the scroll position elsewhere with:

scrollToRow(itemIndex) {
  this._scrollView.scrollTo({y:itemIndex * ROW_HEIGHT});
}

I have published react-native-scroll-into-view, a library which enable "scrollIntoView" feature for React Native ScrollView.

For other lists like SectionList you can still use item index like mentionned in other answers.

If you use FlatList instead of ScrollView, by using ref you will get access to the scrollToIndex method.

https://reactnative.dev/docs/flatlist#scrolltoindex

Related