React Native - Pagination of ListViews in ScrollView?
<p>I have 3 <code>ListView</code> components inside a single <code>ScrollView</code> component like this:</p>

<pre><code>&lt;ScrollView&gt;
  &lt;Header /&gt;
  &lt;ListView onEndReached={() =&gt; alert('load more 1')}/&gt;
  &lt;ListView onEndReached={() =&gt; alert('load more 2')}/&gt;
  &lt;ListView onEndReached={() =&gt; alert('load more 3')}/&gt;
  &lt;Footer /&gt;
&lt;/ScrollView&gt;
</code></pre>

<p>The <code>Header</code> component has some common content and also has 3 tabs, which trigger showing the respective <code>ListView</code></p>

<p>The issue is any <code>ListView</code> with <code>onEndReached={() =&gt; alert('load more 1')}</code> never runs the alert, so I can never load more as I scroll down and hit the end of the listview. Remove the wrapping <code>ScrollView</code> and the alert runs, but the common <code>Header</code> doesn't scroll, since we just removed the wrapping <code>ScrollView</code>. The header needs to scroll with the listview, which is why I wrapped everything that needs to scroll in the <code>ScrollView</code>.</p>

<p><strong>IMPORTANT NOTE:</strong>
I can't really use <code>ListView</code> with <code>renderHeader={this.header}</code>, for this scenario. Because, even though the <code>Header</code> will scroll, it will rerender the common <code>Header</code> and the 3 tabs for each <code>ListView</code> each time a <code>ListView</code> renders, instead of once. So a new <code>Header</code> rerender each time for each <code>ListView</code> won't cut it for the app.</p>

<p>Looking for a solution to this problem, where the <code>Header</code> scrolls with the listviews and the <code>onEndReached</code> is triggered for the visible <code>ListView</code>.</p>