onNavigationStateChange is not working on Android in Expo App

Hey, in the current Version “react-native-webview”: “8.1.1” the onNavigationStateChange event is not triggered in any Android device. On iOS it works perfectly. It is no normal # tag url change, it is a real change from /home to /dashboard.

import React, {
  useEffect,
  useState,
  useRef,
  useCallback,
  StyleSheet,
  useContext,
} from "react";
import {
  RefreshControl,
  ActivityIndicator,
  View,
  ScrollView,
  Alert,
} from "react-native";
import { WebView } from "react-native-webview";

const WebViewComponent = (props) => {
  const [refreshing, setRefreshing] = useState(false);
  const [loaded, isLoaded] = useState(false);
  const [urlReal, setUrl] = useState((props?.url != undefined
        ? props.url
        : "httsp://google.com)
  );

  const webViewRef = useRef();

  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    webViewRef.current.reload();
    setRefreshing(false);
  }, [refreshing]);

  const _onNavigationStateChange = (webViewState) => {
    console.log(webViewState.url);
    // no action on android
  };

  return (
    <View>
      <ScrollView
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
      >
        <WebView
          ref={(ref) => (webViewRef.current = ref)}
          onLoadStart={(e) => {
            console.log("onLoadStart");
          }}
          onLoad={(e) => {
            console.log("onLoad");
          }}
          onLoadEnd={(e) => {
            console.log("onLoadEnd");
          }}
          renderError={(e) => {
            console.log("renderError");
          }}
          source={{
            uri: urlReal,
          }}
          startInLoadingState={true}
          domStorageEnabled={true}
          javaScriptEnabled={true}
          onNavigationStateChange={(e) => _onNavigationStateChange(e)}
          thirdPartyCookiesEnabled={true}
        />
      </ScrollView>
    </View>
  );
};

Environment:

• OS: Andriod
• expo version: 37.0.3
• react-native-webview version: 8.1.1

[jkoutavas]

This issue still exists. I’m seeing it on React Native 0.61.0 and react-native-webview 10.9.1

[mobihack]

Possible fix is to call updateNavigationState when webview url is changed.

That was for an internal fix.

Check below link for an idea. You could find some way to send route change in the SPA to the react native application.

https://stackoverflow.com/questions/53297300/how-to-communcation-between-web-inside-webview-back-to-react-native-apps