Prevent WebView from loading URL in Android (React Native)

Question

Currently, OnShouldStartLoadWithRequest is only supported on iOS. A PR to add support for this on Android was closed. If a WebView on Android tries to open a custom URL scheme, the app will crash -- which is causing my app to crash as well.

The app I'm working on needs to intercept a WebView attempting to open a custom URL scheme and cancel it before opening that URL (which, on iOS, returning false on OnShouldStartLoadWithRequest is a great way to do that).

What's the best way to do this on Android?

I want this code to work:

        <WebView
            ref={WEBVIEW_REF} 
            source={{uri: INITIAL_URI}}
            onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
            style={{width, height: height - navBarHeight, backgroundColor: "#fff"}}
        />

---

 onShouldStartLoadWithRequest(navigator) {
    if (navigator.url.indexOf(INTERCEPT_URL) === -1) {
        return true;
    }    
    return false;
  }

I'm personally okay with pretty much anything that works -- including modifying ReactWebViewManager.java manually. I just need to get this out the door.

Answer 1

You can use the onNavigationStateChange property, which will get the same navigator object as you get in your function onShouldStartLoadWithRequest.

 <WebView
        ref={WEBVIEW_REF} 
        source={{uri: INITIAL_URI}}
        onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest} //for iOS
        onNavigationStateChange ={this.onShouldStartLoadWithRequest} //for Android

        style={{width, height: height - navBarHeight, backgroundColor: "#fff"}}
    />

And then in the function

onShouldStartLoadWithRequest(navigator) {
    if (navigator.url.indexOf(INTERCEPT_URL) === -1) {
        return true;
    } else {
        this.refs[WEBVIEW_REF].stopLoading(); //Some reference to your WebView to make it stop loading that URL
        return false;
    }    
}

I had the same requirement as you, and that's how've I solved it.