How to display "load" message while Webview is loading?

Question

I need to display a message on screen while the Webview component has not fully loaded, but I don’t know how to detect if it has already loaded the content. Here is my code:

return (    
  <View style={styles.container}>
    <WebView 
      style={styles.webview}
      setSupportMultipleWindows={false}
      ref={this.WEBVIEW_REF}
      javaScriptEnabled={true}
      allowsFullscreenVideo={true}
      onNavigationStateChange={this.onNavigationStateChange}
      source={{ uri: 'https://pei.educacao.mg.gov.br/login' }}  />
  </View>
);

Answer 1

I think a good solution here would be to use the compontente Activityindicator

It is a native component that can be customized, will be displayed in place of the component while it is loader, and can display it based on the state of its component, something like:

const App = () => {
  const [visible, setVisible] = useState(false);
  return (
      <View style={styles.container}>
        <WebView
          style={styles.webview}
          setSupportMultipleWindows={false}
          ref={this.WEBVIEW_REF}
          javaScriptEnabled={true}
          allowsFullscreenVideo={true}
          onNavigationStateChange={this.onNavigationStateChange}
          source={{ uri: 'https://pei.educacao.mg.gov.br/login' }}
          onLoadStart={() => setVisible(true)}
          onLoad={() => setVisible(false)}
        />
        {visible ? <ActivityIndicatorElement size="large" /> : null}
      </View>
  );
};

Here was used the visible and setVisiblie to control the visibility of WebView and change that with onLoadStart and onLoad

I have a component like this, it was based on this code: React-Native-show-Progress-bar-while-loading-webview