Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native SectionList scroll to section

I just changed my ListView to React Native's new SectionList and now the app crashes when I attempt to use the scrollTo function, stating that it's undefined. I tried looking up new/alternative functions that may help, but none of them seem to be working.

What's the proper protocol for programmatically scrolling to a specific section with the new SectionList?

Links I've been consulting thus far: https://github.com/facebook/react-native/issues/13151 https://facebook.github.io/react-native/releases/0.43/docs/virtualizedlist.html#scrolltoend

My current attempt:

var params = {animated:true,offset:Platform.OS == "ios" ? 244 : 264}
_mainListView.scrollToOffset(params)
like image 800
Armin Avatar asked Apr 17 '17 13:04

Armin


3 Answers

<SectionList
          ref={(sectionList) => { this.sectionList = sectionList }} .../>

this.sectionList.scrollToLocation(
        {
          sectionIndex: sectionIndex,
          itemIndex: itemIndex
        }
      );

This is what I used to get it working using a mix of this post and https://snack.expo.io/HJp9mEQkG

like image 160
Matthew Barnden Avatar answered Oct 06 '22 19:10

Matthew Barnden


This is how I scroll to end

listRef.current?.scrollToLocation({
  animated: true,
  sectionIndex: sections.length - 1,
  itemIndex: sections[sections.length - 1].data.length - 1,
})

This is how I scroll to top

listRef.current?.scrollToLocation({
  animated: true,
  sectionIndex: 0,
  itemIndex: 0,
})
like image 3
Sokdara Cheng Avatar answered Oct 06 '22 21:10

Sokdara Cheng


scrollToSection = (sectionIndex,itemIndex = 1 ) => {
 this.refs.foo.scrollToLocation({
      sectionIndex: sectionIndex,
      itemIndex: itemIndex
    });
}

sectionList:

<SectionList
 ref = "foo",
 //something
/>
like image 2
Muhammed Mirza Avatar answered Oct 06 '22 20:10

Muhammed Mirza