Fidan Hakaj Fidan Hakaj - 20 days ago 7
iOS Question

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

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).

horizontal scroll with refresh control iOS

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

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>