Реагировать родной загрузки IOS на кнопку назад

Question

есть проблема в приложении webView, когда я хочу вернуться на устройства ios, функция работает правильно, но не показывает счетчик во время загрузки webView. Я создал кнопку из webView, и когда я нажимаю, не работает спиннер (загрузка).

Как я могу показать этот счетчик? На устройствах Android нет этой проблемы, потому что я контролирую аппаратную кнопку.

Это мой код, спасибо!

import React from 'react';
import {ActivityIndicator, AppRegistry, StyleSheet, Text, View, WebView, BackHandler, Dimensions, Platform, StatusBar, topBar, script, TouchableOpacity} from 'react-native';
import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      canGoBack: false,
      back: false
    }
  }

  showSpinner() {
    this.setState({loading:true});
  }
  hideSpinner() {
    this.setState({loading:false});
  }

  goBack = () => {
    this.refWeb.goBack();
    this.showSpinner();
  }

  render() {
    return (
    <View style={ this.state.loading === true ? styles.stylOld : styles.styleNew}>
        <View         onNavigationStateChange={this.onNavigationStateChange.bind(this)}>
        {(Platform.OS) === 'ios' && this.state.canGoBack && !this.state.loading ? (
                                    <TouchableOpacity onPress={this.goBack} style={{flexDirection: 'row', marginBottom:-20, marginTop:20, padding: 13}}>
                                    <Icon
                                        name="chevron-left"
                                        size={20}
                                        type="clear"
                                        color="#147EFB"
                                        style={{marginTop:3}}
                                    />
                                    <Text
                                       style={{
                                                color: "#147EFB",
                                                marginLeft: 5,
                                                fontSize:20
                                             }}>
                                       Back
                                    </Text>
                                    </TouchableOpacity>
                            ) : null
            }
            {this.state.loading ? (
                          <ActivityIndicator
                            color="#009688"
                            size="large"
                            style={styles.ActivityIndicatorStyle}
                          />
                        ) : null}
            </View>
    {this.state.loading ? (
              <ActivityIndicator
                color="#009688"
                size="large"
                style={styles.ActivityIndicatorStyle}
              />
            ) : null}
      <WebView
        style={styles.WebViewStyle}
        onLoadStart={() => this.showSpinner()}
        onLoad={() => this.hideSpinner()}
        ref={(myWeb) => this.refWeb = myWeb}
        onNavigationStateChange={this.onNavigationStateChange.bind(this)}
        renderLoading={this.ActivityIndicatorLoadingView}
        source={{uri: 'https://www.marca.com/'}}
        startInLoadingState
      />
      </View>
    );
  }


ActivityIndicatorLoadingView() {
   //making a view to show to while loading the webpage
   return (
     <ActivityIndicator
        color="#009688"
        size="large"
        style={styles.ActivityIndicatorStyle}
     />
   );
}

  componentDidMount() {
    if(Platform.OS != 'ios'){
      BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
      StatusBar.setHidden(true);
      }
  }

  componentWillUnmount() {
      if(Platform.OS != 'ios'){
      BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
      StatusBar.setHidden(false);
      }
  }

  onNavigationStateChange(navState) {
        this.setState({
        canGoBack: navState.canGoBack,
        loading: navState.loading
     });
   }

  handleBackPress = () => {
     if (this.state.canGoBack) {
        this.refWeb.goBack();
        return true;
      }
    else{
        return false;
      }
  }
}

const {width, height} = Dimensions.get('window');
const styles = StyleSheet.create({
   stylOld: {
        flex: 1,
        top: height/ 2,
        left: width / 2 - 20,
        position: 'absolute'
      },
   styleNew: {
        flex: 1,
      },
  WebViewStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    marginTop: (Platform.OS) === 'ios' ? 20 : 0
    },
  ActivityIndicatorStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    marginTop: -40
    }
});