[ Android ] Cannot stop loading link clicks.

[mdilshan]

I'm using the package in my React native application to load a HTML string.

<WebView 
   source={{ 
    html: htmlString
   }} 
/>;

The htmlString has some links. When clicking on these links I need to prevent loading them and do a in-app navigation using react-navigator. This is the updated code,

<WebView 
   source={{ 
    html: htmlString
   }} 
   onNavigationStateChange={onWebViewNavigateStart}
/>;

And the declaration of callback function is,

const onWebViewNavigateStart = useCallback(
  (newNavState: WebViewNavigation) => {
    const { url } = newNavState;
    if (!url) return;
    // handle certain doctypes
    if (url.startsWith("https://www.abcd.com/cat/")) {
      if (webViewRef.current) {
        webViewRef.current.stopLoading(); // <------- Here I try to stop loading
      }
      navigation.navigate("StackName", {
        screen: "ScreenName",
        params: {
          // some params
        },
      });

      return;
    }
   // rest of the code 

On iOS this works fine but in Android, the webview will load the clicked url and after some seconds the onWebViewNavigateStart is called. Then it will trigger the clicked URL and navigate to the screen ( "ScreenName" ).

Here is the summary what happens in the app right now

1. Load the html string into the webview
2. Click on a link in webview content.
3. Loading clicked url into the webview
4. Trigger onWebViewNavigateStart
5. if condition full filled and navigate to the given screen.

What supposed to happen

1. Load the html string into the webview
2. Click on a link in webview content.
3. Trigger onWebViewNavigateStart
4. if condition full filled and navigate to the given screen.