RefreshControl only appearing on top of first child in a horizontal ScrollView (iOS)
<p>I have a use case where I want to list horizontally cards.
I implemented it with a horizontal <a href="https://facebook.github.io/react-native/docs/scrollview.html" rel="nofollow noreferrer">ScrollView</a>.</p>

<p>Then, for each card I would like to implemented the pull-to-refresh pattern so that the data displayed in the card are updated.
I used therefore the <a href="https://facebook.github.io/react-native/docs/refreshcontrol.html" rel="nofollow noreferrer">RefreshControl</a> component as an attribute of the ScrollView.</p>

<p>The issue is that on iOS, when I switch to another card than the 1st, I cannot see the RefreshControl component (see gif below).</p>

<p><a href="https://i.stack.imgur.com/7lSBM.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7lSBM.gif" alt="horizontal scroll with refresh control iOS"></a> </p>

<p><strong>Code</strong></p>

<pre><code>&lt;ScrollView
  contentContainerStyle={styles.container}
  horizontal
  pagingEnabled
  showsHorizontalScrollIndicator={false}
  directionalLockEnabled
  contentInset={{top: 1}}
  refreshControl={
    &lt;RefreshControl
      refreshing={this.state.isRefreshing}
      onRefresh={this._onRefresh.bind(this)}
    /&gt;
  }
&gt;
  &lt;Text style={styles.card}&gt;First child&lt;/Text&gt;
  &lt;Text style={styles.card}&gt;Second child&lt;/Text&gt;
&lt;/ScrollView&gt;
</code></pre>

<p>Full code in the demo below</p>

<p><strong>Demo</strong> <a href="https://rnplay.org/apps/sRXpEw" rel="nofollow noreferrer">https://rnplay.org/apps/sRXpEw</a></p>

<p><strong>Edit</strong></p>

<p>It looks related to this part of the code : <a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/ScrollView.js#L523-L529" rel="nofollow noreferrer">Libraries/Components/ScrollView/ScrollView.js#L523-L529</a></p>