how to display a loading spinner while the webview page is loading in react-native

Webview.jsx

{this.state.isLoading ? (
    <ActivityIndicator size="large" style={{ alignSelf: 'center', marginTop: 150 }} />
) : null}
<WebView
    useWebKit
    style={{ width: '100%', display: !this.state.isLoading ? 'flex' : 'none' }}
    source={{ uri: 'https://google.com' }}
    injectedJavaScript={`
        window.ReactNativeWebView.postMessage('loaded')
    `}
    onMessage={event => {
        if (event.nativeEvent.data === 'loaded') {
            this.setState({
                isLoading: false,
            });
        }
    }}
/>