I have a ListView that gets an initial DataSource. The user can then run a search which will update the ListView with a new DataSource. Unfortunately when this happens, the scroll position gets reset, which isn't ideal.
I tried reusing the same ListView.DataSource object instead of creating a new one, but that gave me the same results:
...
dataSource: new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
}),
componentWillReceiveProps(nextProps) {
this.setState({
dataSource: this.dataSource.cloneWithRowsAndSections({...});
}
...
I tried using scrollTo on the ListView after the dataSource is changed, but this cases the app to jump around a lot...not a good experience. Is there a ListView setting or a different way to update the dataSource that will prevent the scroll position from resetting?
The ListView has 2 sticky headers, the top header has 2 rows a page description and a redux container that renders a 3 image grid. The second section is a list of up to 50 components that are somewhat heavy to render: a square image, some text and a few SVGs. My current method works using onContentSizeChange to force the scroll position, but this causes scroll position jumpiness and it looks amateur.
UPDATE: Digging into the documentation and source code for ListView it ultimately just renders a ScrollView. I can use contentOffset to set the initial scroll position, but it doesn't seem to help when the ListView DataSource updates; even hardcoding contentOffset doesn't help. I also tried setting scrollEnabled to false, which did indeed prevent user driven scrolling, but the ListView scroll position is still reset when it's DataSource is updated :s
UPDATE 2: I have done some further debugging and discovered that the suggested rowHasChange and sectionHeaderHasChanged functions do a pretty good job of only rendering rows/section headers that need to be rendered.