Repository navigation
SectionList jumps when using getItemLayout #31163
Description
Activity
Repro'd with your Snack. Sometimes it works fine, other times it jumps to the section and then has some additional chunky scrolling where it overshoots. Some error in the list virtualization? There doesn't seem to be any docs on getItemLayout to help understand dos/don'ts.
yep, I think its worse in our actual code, but I couldn't say why. Maybe memory related? I'm half getting around this by loading basically the entire list asap:
initialNumToRender={20} maxToRenderPerBatch={50} updateCellsBatchingPeriod={10} windowSize={300}honestly the above might be incorrect—I'm by no means an expert at using virtual lists, and this does mean if you open the list and immediately press the flag section it won't scroll all the way there. The other thing that works, but feels like a worse UX, is loading the full list on the get-go. This can be done by just not using a virtual list at all, but does cause the initial load to take longer than I would like.
Having the same problem in 0.64. Any workaround without loading everything upfront?
Update: Looks like the jump only happens when the
stickySectionHeadersEnabledis set to true. I have set it to false and use another component to show its current section.We are facing the very same problem implementing an emoji picker as well.
Give recyclerlistview a try. It's performance is even better than flatlist in my project.
I had the same problem till I discovered the index passed also included the 'footer' for each section. For example, if your data[] for each section had two rows, you would have indexes like the following:
0: Item0Header 1: Item0Row0 2: Item0Row1 3:Item0Footer 4: Item1Header 5: Item1Row0 6: Item1Row1 7:item1FooterThings will appear to work normally for some scrolling but when new elements are created on the fly the offsets do not align properly and the list appears to 'jump' crazily if you don't account for the footer. It can return { offset, length:0, index } if a footer is not visible.
Reacted by ShepelE and Scotty WeeksI also did the same "discovery" as @glenne , but I was still having "jumps" when using
getItemLayoutandinitialScrollIndex.The problem was in my calculations of
getItemLayout. I was considering the lastItemSeparatorComponentof a section as part of the last item's length, but the space was in fact created by my SectionHeader. This caused my SectionFooter to be slightly offset, which explained why my list jumped 5-6 times before going to the expected position. My length were good, but my offset weren't.Since I had a rough time figuring all this, I decided to create a gist that could help some people in figuring out how to correctly use
initialScrollIndexwithgetItemLayout: https://github.com/proxy/gist.github.com/RaphBlanchet/472ed013e05398c083caae6216b598b5Hope it helps!
I had the same problem till I discovered the index passed also included the 'footer' for each section. For example, if your data[] for each section had two rows, you would have indexes like the following:
0: Item0Header 1: Item0Row0 2: Item0Row1 3:Item0Footer 4: Item1Header 5: Item1Row0 6: Item1Row1 7:item1FooterThings will appear to work normally for some scrolling but when new elements are created on the fly the offsets do not align properly and the list appears to 'jump' crazily if you don't account for the footer. It can return { offset, length:0, index } if a footer is not visible.
Thanks you! I found https://medium.com/@jsoendermann/sectionlist-and-getitemlayout-2293b0b916fb this article and used react-native-section-list-get-item-layout module. It's really easy and works well! But we use reselect and it woks faster if to count all heights and offsets in selector and use those ready memoized values.
Reacted by seomoonThis issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue was closed because it has been stalled for 7 days with no activity.
Please provide all the information requested. Issues that do not follow this format are likely to stall.
Description
We're trying to create a section list that allows the user to jump to various sections. We have it setup and have also attempted to figure out the correct format for
getItemLayout. We're not running into issues but only with the second half of the list. Here is a snack with the approximate code we're using: https://snack.expo.io/@tiltshift/sectionlist-jumpingNote that for some reason the snack seems to perform slightly better than our actual code, but does still have issues when jumping to the second half of sections (in this example
p,o,sandf). Also when scrolling at the bottom of the list there seems to be lag and jumping that occurs that we do not see at the top of the list.These issues only seem to show up when not rendering the entire list at once. If we update
initialNumToRenderto render everything (say300) everything works great.Also no matter where you are in the list the scrollbar seems to jump around as if the size keeps changing.
React Native version:
0.63
Steps To Reproduce
fsquare at the topoto go to the object sectionExpected Results
fshould jump to the flag section, but often takes you further up the listSnack, code example, screenshot, or link to a repository:
https://snack.expo.io/@tiltshift/sectionlist-jumping