SectionList
1
2
3
4
sectionListRef.current?.scrollToLocation({
sectionIndex: 0,
itemIndex: 1,
});
Why scrollToLocation function cannot work?
1
2
3
4
5
6
7
8
9
10
## Root cause
* scrollToLocation should be used with getItemLayout and onScrollToIndexFailed, otherwise it cannot scroll to locations outside the render window.
* If each element hasn't a fixed height, before component has already mounted, it cannot scroll to specific sectionIndex or itemIndex.
## scrollToLocation params
* animated (default: true): Whether the list should do an animation while scrolling
* itemIndex: Index within section for the item to scroll to. Required.
* sectionIndex: Index for section that contains the item to scroll to. Required.
* viewOffset: A fixed number of pixels to offset the final target position, e.g. to compensate for sticky headers.
* viewPosition: A value of 0 places the item specified by index at the top, 1 at the bottom, and 0.5 centered in the middle.
How to set itemIndex in scrollToLocation?
1
2
3
4
5
6
7
8
9
## preconditio: Each item has fixed height.
_SectionList contains sectionHeader and sectionFooter, so no matter whether sectionHeader or sectionFootor has been set. We should also count it._
> Example
const dataSource = [{title: "Fruit", data: ["apple","banner"]},{title: "Animal", data: ["panda","pig"]}]
Index0: sectionHeader - title - "Fruit"
Index1: "apple"
Index2: "banner",
Index3: this first section footer
Index4: sectionHeader - title - "Animal"
Without ScrollToLocation, how to scroll to specified position by SectionList?
1
2
3
4
5
6
1. sectionListRef.current?.getScrollResponder()?.scrollTo({y: positionY});
2. sectionListRef.current?.scrollToLocation({
sectionIndex: 0,
itemIndex: 0,
viewOffset: -positionY,
});