webview pull to refresh expo code example

Example: expo webview refresh

import * as React from "react"
import { WebView as RNWebView } from "react-native-webview"
import { RefreshControl, ViewStyle, ScrollView } from "react-native"

// prettier-ignore
const INJECTED_JS = `
  window.onscroll = function() {
    window.ReactNativeWebView.postMessage(
      JSON.stringify({
        scrollTop: document.documentElement.scrollTop || document.body.scrollTop
      }),     
    )
  }
`

interface ExampleState {
  isPullToRefreshEnabled: boolean
  scrollViewHeight: number
}

interface ExampleProps {}

const SCROLLVIEW_CONTAINER: ViewStyle = {
  flex: 1,
  height: "100%",
}

const WEBVIEW = (height): ViewStyle => ({
  width: "100%",
  height,
})

export class Example extends React.Component<ExampleProps, ExampleState> {
  webView: any

  state = {
    isPullToRefreshEnabled: false,
    scrollViewHeight: 0,
  }

  setWebViewRef = ref => {
    this.webView = ref
  }

  onRefresh = () => this.webView.reload()

  onWebViewMessage = e => {
    const { data } = e.nativeEvent

    try {
      const { scrollTop } = JSON.parse(data)
      this.setState({ isPullToRefreshEnabled: scrollTop === 0 })
    } catch (error) {}
  }

  render() {
    const { scrollViewHeight, isPullToRefreshEnabled } = this.state

    return (
      <ScrollView
        style={SCROLLVIEW_CONTAINER}
        onLayout={e => this.setState({ scrollViewHeight: e.nativeEvent.layout.height })}
        refreshControl={
          <RefreshControl
            refreshing={false}
            enabled={isPullToRefreshEnabled}
            onRefresh={this.onRefresh}
            tintColor="transparent"
            colors={["transparent"]}
            style={{ backgroundColor: "transparent" }}
          />
        }>
        <RNWebView
          source={{ uri: "https://infinite.red" }}
          ref={this.setWebViewRef}
          style={WEBVIEW(scrollViewHeight)}
          onMessage={this.onWebViewMessage}
          injectedJavaScript={INJECTED_JS}
        />
      </ScrollView>
    )
  }
}