react-native-webview: 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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 6
Comments: 20

Most upvoted comments

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

jkoutavas on Oct 2, 2020

I found a solution. https://stackoverflow.com/a/72555083/16607002

OxamaHxn on Jun 9, 2022

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

mobihack on Jul 27, 2020

Seems to be called on android if I set setSupportMultipleWindows={false}

paulg0614 on Feb 16, 2023

In my case using html as a source for the webview was the problem

source={{ html: myHtml, }}

I changed it to uri and it worked

source={{ uri: myUri, }}

Th0masso on Jul 20, 2022

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

I fixed it that way, but this could only be a workaround in my mind!

mitchobrian on Jul 27, 2020

It also do not work with the current Version of webview: “react-native-webview”: “^10.3.2”

mitchobrian on Jul 12, 2020

setSupportMultipleWindows={false} doesn’t change anything for me.
However I saw that you can use onLoadProgressto handle opening links in external browser on Android. My solution that allows opening external links in both iOS and Android:

  // iOS open external links in browser
  // doesnt work on android
  const onNavigationStateChange = (navState: WebViewNavigation) => {
    if (navState.url.includes('maindomain.com')) return
    webViewRef.current?.stopLoading()
    Linking.openURL(navState.url)
  }

  // android open external links in browser
  // doesnt work on iOS
  const onLoadProgress = (event: WebViewProgressEvent) => {
    if (event.nativeEvent.url.includes('maindomain.com')) return
    webViewRef.current?.stopLoading()
    Linking.openURL(event.nativeEvent.url)
  }

  return (
    <WebView
      {...webViewProps}
      source={{ uri: url }}
      ...
      onNavigationStateChange={onNavigationStateChange}
      onLoadProgress={event => onLoadProgress(event)}
    />
  )

clemwo on Jun 13, 2023

Same issue. Any news on this?

valery-lavrik on May 18, 2022

Same issue. Any news on this?

AndrosVGL on Nov 19, 2021

Same problem, any solution?

hojasc on Nov 12, 2021

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

github-actions[bot] on Sep 26, 2020