HighLight / ScrollTo - ListView, ScrollView on React-Native

Question

I'm playing a bit with react-native and I got stuck at a stage where I can't figure it out by myself. I have a list of items and I would like to scroll automatically to some item.

I know I could use the ScrollView and the contentOffset={{x:0,y:0}} and set and offset, however it would be a little bit more complicate because I would need to track the position of each item, I'm wondering if there is an easy way to do it, so I could sort of focus on specific row in ListView.

Is there such a thing available on the libs?

Dud

Great question, I'd be interested to hear the solution as well – Headstand

I just came across this. Check it out and let me know if it's helpful github.com/facebook/react-native/commit/… – Headstand

Thanks Chris for the hint! – Dud

Answer 1

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});
}

Pirogue

But what if your rows are of variable height? – Pennyweight

@Pennyweight may be you can use facebook.github.io/react-native/docs/… to measure position, or to measure the heights of all previous rows to the one you want on screen and add them up. (I know this comment is from >1yr ago, but this shows in google) – Jasisa

I just found out that SectionList does have a scrollToLocation that receives the index of the section and item. ListView doesn't have this, i don't know why. May be you can use SectionList, including only one section and rendering as nothing, and then use this method. Of course it's not very elegant, but it will probably work better than anything else for rows of variable height (facebook.github.io/react-native/docs/…) – Jasisa

facebook.github.io/react-native/docs/scrollview#scrollto parameters have changed, updated answer – Akira

For horizontal items, we can use scrollToRow(itemIndex) { this._scrollView.scrollTo({x:itemIndex * ROW_HEIGHT}); } – Mobilize

Answer 2

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.

Schopenhauerism

This is a better solution for items in the ScrollView have variable heights. – Pelops

Brilliant solution! – Epithelium

Answer 3

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

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

Carlton