lucasferreira / react-native-webview-android

Simple React Native Android module to use Android's WebView inside your app
355 stars 158 forks source link

Missing Browser State #99

Open psiie opened 6 years ago

psiie commented 6 years ago

From what I can tell, and the digging that I performed, there is no way to see the state of the browser. Weather it is loading, progress bar, ect. This would be very nice so that I can animate a loading bar and be able to turn the refresh button into a 'stop' button (and vice versa).

Feature request? Or am I missing something obvious?

lucasferreira commented 6 years ago

Hi @darkenvy

You could use the onNavigationStateChange event to monitor the state of your page/navigation:

class WebViewTest extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoadingWebview: true,
    };
  }
  onNavigationStateChange = (event) => {
    this.setState({ isLoadingWebview: event.loading }); // if the bool `event.loading` is true, it means that the webpage still loading...
  };
  render() {
    // in the render method you could check this.state.isLoadingWebview to work with that info

    return (
      <WebViewAndroid
        ref="webViewAndroidSample"
        javaScriptEnabled={true}
        onNavigationStateChange={this.onNavigationStateChange}
        url={"https://www.google.com"} // or use the source(object) attribute...
        style={{flex: 1}} />
    );
  }
}