RefreshControl appears only on top of the first child in the horizontal ScrollView (iOS)

Question

I have a case where I want to list horizontal maps. I implemented it with a horizontal ScrollView .

Then, for each card, I would like to implement a pull-to-refresh template so that the updated data is displayed on the map. Therefore, I used the RefreshControl component as a ScrollView attribute.

The problem is that in iOS, when I switch to a different card than the 1st, I do not 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

Looks like this piece of code: Libraries / Components / ScrollView / ScrollView.js # L523-L529

Answer 1

As far as I know, this is the expected refreshControl behavior - there should be only one.

Will this work for your application?

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