RefreshControl only appearing on top of first child in a horizontal ScrollView (iOS)

Question

I have a use case where I want to list horizontally cards. I implemented it with a horizontal ScrollView.

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 RefreshControl component as an attribute of the ScrollView.

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

Code

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

Full code in the demo below

Demo https://rnplay.org/apps/sRXpEw

Edit

It looks related to this part of the code : Libraries/Components/ScrollView/ScrollView.js#L523-L529

Answer 1

As far as I know, this is expected behavior of refreshControl- there is only supposed to be one.

Would this work for your app?

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