The Setup
I'm using redux and a ListView with 2 different types of rows, both with specified – but different – heights. The ListView uses sectionHeaders and is rendered inside a React Component instead of a stateless functional component (for various reasons).
The ListView re-renders with new data (used in dataSource.cloneWithRowsAndSections()) that is pulled from redux whenever particular changes happen within redux state. .
The Issue
The problem is when I have scrolled down to any section below the first and interact with the UI to add an object to the data in the first section: a gap appears at the top of the second section that seems to be the height of my scroll position past the top of the second section. The added item is properly rendered in the first section. This happens when the entire ListView is re-rendered as a result of that redux state change.
It's not a true gap, either — the first item in the second section is rendered on top of the items and section headers below it.
I'm pretty sure I am pushing the limits of what a ListView can do but does anyone have any idea what could be causing this or how to fix it?
