React native: Scroll view refresh control pull to refresh not refreshing from top

Question

I have added pull to refresh inside web view using scroll view. It is working but the condition is that pull to refresh should only work when we are at the top of the page inside web view. Here is my code

<ScrollView
  contentContainerStyle={{flex: 1}}
  refreshControl={
    <RefreshControl
      refreshing={refreshing}
      onRefresh={onRefresh}
    />
  }
>
<WebView scalesPageToFit
    startInLoadingState
    ref = {webViewRef}
    originWhitelist={['*']}
    style={{ flex: 1 }} source={{ uri: url  }} onLoadStart={() => (setLoading(true))} onLoadEnd={() => (setLoading(false))}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    setSupportMultipleWindows={false}
    />
    </ScrollView>

Answer 1

Added onScroll method for web view and got the yOffset and added condition based on that to reload the webpage/not

<WebView scalesPageToFit
startInLoadingState
ref = {webViewRef}
originWhitelist={['*']}
style={{ flex: 1 }} source={{ uri: url  }} onLoadStart={() => (setLoading(true))} onLoadEnd={() => (setLoading(false))}
javaScriptEnabled={true}
domStorageEnabled={true}
setSupportMultipleWindows={false}
onScroll={handleScroll}
/>

and the method

const handleScroll = (event) =>  {
console.log(Number(event.nativeEvent.contentOffset.y))
const yOffset = Number(event.nativeEvent.contentOffset.y)
if (yOffset === 0){
  console.log('top of the page')
  handleRefresh(true)
}else{
  handleRefresh(false)
}

}