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
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.

how could I use this method using const