question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SectionList misses scrollTo* methods

See original GitHub issue

I’m planning to switch from ListView to SectionList, but find that I can’t perform any scrollTo* methods, they are defined in VirtualizedList but not in VirtualizedSectionList. At least scrollToOffset should be implemented.

I’d like to send a PR, but I’m afraid to break the docs, and I don’t know whether should we implement scrollToIndex and scrollToItem as they are different from FlatList

Perhaps a new method scrollToSection could be added too, it’s a common use case in a contact list

@sahrens

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:10
  • Comments:32 (15 by maintainers)

github_iconTop GitHub Comments

18reactions
steobriencommented, Apr 13, 2018

[Update 2018-04-13: this workaround apparently works on iOS, but not Android]

A workaround in the absence of these methods is to work back to the VirtualizedList and directly access them there. This requires using underscored, undocumented methods and so should only be used in a pinch.

For example:


//…

componentDidMount() {
  this.refs.list._wrapperListRef._listRef.scrollToOffset({offset: 0})
}

//…

<SectionList ref="list" {…otherProps} />

//…
5reactions
RUIFERNANDE5commented, Jun 21, 2017

@sahrens Version 0.45 is already up and scrollToLocation is documented, but I can’t really find an example. Would be awesome if you could give me a hint how can I get the index in renderSectionHeader and scroll to that section index?

Thanks in advance EDIT:

I was able to use it:

scrollView.scrollToLocation({
         animated: true,
         sectionIndex: 3,
         itemIndex: 0,
         viewOffset: 28 // height of section header
})
Read more comments on GitHub >

github_iconTop Results From Across the Web

SectionList - React Native
SectionList. A performant interface for rendering sectioned lists, supporting the most handy features: Fully cross-platform.
Read more >
React Native SectionList scroll to section - Stack Overflow
I just changed my ListView to React Native's new SectionList and now the app crashes when I attempt to use the scrollTo ......
Read more >
[Solved]-React Native SectionList scroll to section-Reactjs
This is how I scroll to end listRef.current?.scrollToLocation({ animated: true, sectionIndex: sections.length - 1, itemIndex: sections[sections.length ...
Read more >
ScrollRef - You.i TV Developer Portal
Methods. scrollTo: object. scrollToEnd: object ... Method: scrollTo(). Similar to scrollTo() method of Facebook React Native ScrollView component.
Read more >
AutoScrolling list in React Native | by Ritesh Shakya | Code Duo
Adding Auto Scrolling + Looping. Now let's get to the fun parts. We will handle our auto-scrolling feature by using the ScrollView 's...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found