CODEWITHSUNDEEP
javascriptreactjsreact-native
Armin
Armin

Reputation: 1281

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)

Upvotes: 18

Views: 20832

Answers (5)

patel jigar
patel jigar

Reputation: 52

SectionList scroll to end

const [listViewHeight, setListViewHeight] = useState(undefined);

<SectionList
      onRefresh={onRefresh}
      sections={sectionListData}
      renderItem={renderItem}
      renderSectionHeader={renderSectionHeader}


onLayout={event => {
        setListViewHeight(event.nativeEvent.layout.height)
}}
onContentSizeChange={(w, h) => {
        scrollViewRef?.current?.getScrollResponder()?.scrollTo({
          y: h - listViewHeight
        })
}}

Upvotes: 0

Sokdara Cheng
Sokdara Cheng

Reputation: 442

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

Upvotes: 5

Андрій Нагорний
Андрій Нагорний

Reputation: 81

For me workaround is

list.current?.getScrollResponder()?.scrollTo({ x: 0, y: 0, animated: false })

Upvotes: 2

Matthew Barnden
Matthew Barnden

Reputation: 538

<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

Upvotes: 8

Muhammed Mirza
Muhammed Mirza

Reputation: 126

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

sectionList:

<SectionList
 ref = "foo",
 //something
/>

Upvotes: 3

Related Questions