WebView in ScrollView calling refreshControl when swiping up React Native Android all the time

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

Strangely enough, I removed the style from contentContainerStyle and it worked fine. Just figured I'd remove extra stuff that might be impeding the function. Perhaps it's a bug, but try to avoid using Flexbox settings in there for now.