How can I Refresh Web View in React Native?

Question

I have a webview as tab A and a todolist flatlist on tab B. If the user adds an entry to the flatlist on tab B, i want the tab A webview to refresh.

I couldn't find any .refresh() or reload() methods on the webview control https://facebook.github.io/react-native/docs/webview.html

Any ideas how to accomplish this?

Answer 1

You can set a key to the webview

key={this.state.key}

and then you can reload it by updating the state

this.setState({ key: this.state.key + 1 }); 

Answer 2

Well I reload WebView by doing following:

render() {
  let WebViewRef;
  return (
    <View style={Style1.container}>
      <WebView
        ref={WEBVIEW_REF => (WebViewRef = WEBVIEW_REF)}
        source={{ uri: this.state.site }}
        renderLoading={this.ActivityIndicatorLoadingView}
        startInLoadingState={true}
      />
      <Button title="Reload Me!" onpress={() => { WebViewRef && WebViewRef.reload(); }} />
    </View>
  )
}

In this code I Declare Reference Variable WebViewRef first then assign this to WebView as ref={WEBVIEW_REF => (WebViewRef = WEBVIEW_REF)} and then call this reference for reload() as ()=>{ WebViewRef && WebViewRef.reload();}