expo webview refresh

1import * as React from "react"
2import { WebView as RNWebView } from "react-native-webview"
3import { RefreshControl, ViewStyle, ScrollView } from "react-native"
4
5// prettier-ignore
6const INJECTED_JS = `
7  window.onscroll = function() {
8    window.ReactNativeWebView.postMessage(
9      JSON.stringify({
10        scrollTop: document.documentElement.scrollTop || document.body.scrollTop
11      }),     
12    )
13  }
14`
15
16interface ExampleState {
17  isPullToRefreshEnabled: boolean
18  scrollViewHeight: number
19}
20
21interface ExampleProps {}
22
23const SCROLLVIEW_CONTAINER: ViewStyle = {
24  flex: 1,
25  height: "100%",
26}
27
28const WEBVIEW = (height): ViewStyle => ({
29  width: "100%",
30  height,
31})
32
33export class Example extends React.Component<ExampleProps, ExampleState> {
34  webView: any
35
36  state = {
37    isPullToRefreshEnabled: false,
38    scrollViewHeight: 0,
39  }
40
41  setWebViewRef = ref => {
42    this.webView = ref
43  }
44
45  onRefresh = () => this.webView.reload()
46
47  onWebViewMessage = e => {
48    const { data } = e.nativeEvent
49
50    try {
51      const { scrollTop } = JSON.parse(data)
52      this.setState({ isPullToRefreshEnabled: scrollTop === 0 })
53    } catch (error) {}
54  }
55
56  render() {
57    const { scrollViewHeight, isPullToRefreshEnabled } = this.state
58
59    return (
60      <ScrollView
61        style={SCROLLVIEW_CONTAINER}
62        onLayout={e => this.setState({ scrollViewHeight: e.nativeEvent.layout.height })}
63        refreshControl={
64          <RefreshControl
65            refreshing={false}
66            enabled={isPullToRefreshEnabled}
67            onRefresh={this.onRefresh}
68            tintColor="transparent"
69            colors={["transparent"]}
70            style={{ backgroundColor: "transparent" }}
71          />
72        }>
73        <RNWebView
74          source={{ uri: "https://infinite.red" }}
75          ref={this.setWebViewRef}
76          style={WEBVIEW(scrollViewHeight)}
77          onMessage={this.onWebViewMessage}
78          injectedJavaScript={INJECTED_JS}
79        />
80      </ScrollView>
81    )
82  }
83}