title: React-Native ListView rendering rows on top of each other after adding to dataSource
body: <h3>The Setup</h3>
  
  <p>I'm using <code>redux</code> and a <code>ListView</code> with 2 different types of rows, both with specified – but different – heights. The <code>ListView</code> uses <code>sectionHeaders</code> and is rendered inside a <code>React Component</code> instead of a stateless functional component (for various reasons).</p>
  
  <p>The <code>ListView</code> re-renders with new data (used in <code>dataSource.cloneWithRowsAndSections()</code>) that is pulled from <code>redux</code> whenever particular changes happen within <code>redux</code> state. .</p>
  
  <hr>
  
  <h3>The Issue</h3>
  
  <p>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: <strong>a gap appears at the top of the second section</strong> 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 <code>ListView</code> is re-rendered as a result of that <code>redux</code> state change.</p>
  
  <p>It's not a true gap, either — the first item in the second section is <strong>rendered on top of the items and section headers below it</strong>.</p>
  
  <hr>
  
  <p><em>I'm pretty sure I am pushing the limits of what a <code>ListView</code> can do but does anyone have any idea what could be causing this or how to fix it?</em></p>