3

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
Gabriel Azevedo
  • 115
  • 1
  • 9
  • Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. – halfer May 25 '18 at 21:53

1 Answers1

2

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!

Wellington Adam
  • 21
  • 2