How to Add Activity Indicator in React Native Webview to Show Progress

WebView is an integral component in React Native. You can use it as a mobile browser inside your React Native app. As we know, web pages take some time to load. It’s better to show an ActivityIndicator when the web pages load every time.

For showing ActivityIndicator while loading I use two props of WebView- onLoadStart and onLoad. I show ActivityIndicator when the loading starts and hide the same when the loading ends. Look at the full example given below:

import React, { Component } from 'react';
import { View, WebView, ActivityIndicator } from 'react-native';

export default class webviewWithLoading extends Component {
  constructor(props) {
    super(props);
    this.state = { visible: true };
  }

  hideSpinner=()=> {
    this.setState({ visible: false });
  }
  showSpinner=()=> {
    this.setState({ visible: true });
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <WebView
          onLoadStart={() => (this.showSpinner())}
          onLoad={() => this.hideSpinner()}
          style={{ flex: 1 }}
          source={{ uri: 'https://google.com' }}
        />
        {this.state.visible && (
          <ActivityIndicator
            style={{
            flex: 1,
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            position: 'absolute',
            alignItems: 'center',
            justifyContent: 'center' }}
            size="large"
          />
        )}
      </View>
    );
  }
}

The following will be the output.