exemple de loading avec une WebView react native

loadingWebView.js

import React, { useState } from 'react'
import { ActivityIndicator, View, StyleSheet } from 'react-native'
import { WebView } from 'react-native-webview'
const styles = StyleSheet.create({
  WebViewStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    marginTop: 40
  },
  ActivityIndicatorStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute'
  },
  stylOld: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  styleNew: {
    flex: 1
  }

})
const Home = () => {
  const [loading, setLoading] = useState(true)
  const hideSpinner = () => setLoading(false)
  const showSpinner = () => setLoading(true)
  return (
    <View style={loading ? styles.stylOld : styles.styleNew}>
      {loading ? (
        <ActivityIndicator
          color='#009688'
          size='large'
          style={styles.ActivityIndicatorStyle}
        />
      ) : null}
      <WebView
        style={styles.WebViewStyle}
        source={{ uri: 'https://expo.io' }}
        javaScriptEnabled
        domStorageEnabled
        onLoadStart={() => showSpinner()}
        onLoad={() => hideSpinner()}
      />
    </View>
  )
}
Home.navigationOptions = {
  header: null
}
export default Home

loadingWebViewComponentClass.js

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

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

  showSpinner() {
    console.log('Show Spinner');
    this.setState({ visible: true });
  }

  hideSpinner() {
    console.log('Hide Spinner');
    this.setState({ visible: false });
  }

  render() {
    return (
      <View
        style={this.state.visible === true ? styles.stylOld : styles.styleNew}>
        {this.state.visible ? (
          <ActivityIndicator
            color="#009688"
            size="large"
            style={styles.ActivityIndicatorStyle}
          />
        ) : null}

        <WebView
          style={styles.WebViewStyle}
          //Loading URL
          source={{ uri: 'https://aboutreact.com' }}
          //Enable Javascript support
          javaScriptEnabled={true}
          //For the Cache
          domStorageEnabled={true}
          //View to show while loading the webpage
          //Want to show the view or not
          //startInLoadingState={true}
          onLoadStart={() => this.showSpinner()}
          onLoad={() => this.hideSpinner()}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  stylOld: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  styleNew: {
    flex: 1,
  },
  WebViewStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    marginTop: 40,
  },
  ActivityIndicatorStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
  },
});