Is there a way to update my own ListView DataSource so that it doesn't scroll through the reset position?

Question

I have a ListView that gets the original DataSource. The user can then run a search that will update the ListView with the new DataSource. Unfortunately, when this happens, the scroll position gets reset, which is not ideal.

I tried to reuse the same ListView.DataSource object instead of creating a new one, but this 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 in the ListView after changing the dataSource, but that means the application is jumping a lot ... not very well. Is there a ListView parameter or another way to update the data source that will prevent the scroll position from resetting?

The ListView has 2 sticky headers, the top header has 2 lines of page description and a redux container that displays 3 image grids. The second section is a list of 50 components that are somewhat difficult to render: a square image, some text, and several SVGs. My current method works using onContentSizeChange to force the scroll position, but this causes the scroll position to jump and looks like an amateur.

UPDATE:. Digging into the documentation and source code for the ListView, it ultimately just displays the ScrollView. I can use contentOffset to set the start position of the scroll, but it doesn't seem to help when updating the ListView DataSource; even hardcoding contentOffset doesn't help. I also tried setting scrollEnabled to false, which really prevented scrolling using a user-driven one, but the scroll position of the ListView is still reset when updating the DataSource: s

UPDATE 2: I did another debugging and found that the proposed functions rowHasChange and sectionHeaderHasChanged do a pretty good job of only rendering the row / section headers that need to be rendered.

Answer 1

You can save your scroll position and after setting new details in the ListView - make scrollTo without animation

Answer 2

What I would do in your case is to show a peculiar overlay using the load counter to hide the bounce effect and then hide the overlay after setting the scroll, I can’t say how to achieve this, as I am quite new to RN, but certainly its possible