WebView inside ScrollView calling refreshControl everytime swiping up React Native Android

Question

I have a WebView inside a ScrollView on a React Native app. The ScrollView has the refreshControl prop so I can refresh the WebView when I reach the top of the app.

Here's the problem: I scroll the WebView without a problem, but whenever I swipe up to go to the top of the page, doesn't matter if I'm on the end, the middle or the beginning of the page, the refreshControl is always triggered.

The RefreshControl is triggered when the scrollY: 0 and the scrollY is always 0, because what is being scrolled isn't the ScrollView but the WebView, so the ScrollView is always at scrollY: 0.

I already tried the scrollEnabled prop on both WebView and ScrollView but none worked.

Here's how the code looks right now:

<View style={{flex: 1}}>
    <ScrollView
      contentContainerStyle={{flex: 1}}
      refreshControl={
        <RefreshControl
          refreshing={this.state.refreshing}
          onRefresh={this._onRefresh.bind(this)}
        />
      }
    >
      <WebView
        ref="webview"
        source={{uri: initialUrl}}
      />
    </ScrollView>
</View>

I've removed all the props to try to start over, but I always get the same problem. On iOS it's working alright, without this issue.

Yes, I do have other stuff inside this mother View.

Answer 1

I had the same problem, but using the FlatList. Try to remove the contentContainerStyle, more specifically the flex: 1. In this way, worked for me!