title: React-native android WebView handle clicked Url before loading
body: <p>I'm showing a Website trough a WebView in react-native. On this Website there is a link to a PassWallet (.pkpass) file (not the only use case). When I click on any link on this Website I want to check whether it is an other Website or a .pkpass file or whatever. While this check is running I don't want to load anything, just wait until my function is finished and I'm knowing if I should open a Website or open another app or whatever. I want to make this on the JavaScript side because my whole routing functions are there and in my opinion react-native was built for this cases :-)</p>
  
  <p>On iOS there is this beautiful function <code>onShouldStartLoadWithRequest</code> which exactly does what I need. </p>
  
  <pre><code>_onShouldStartLoadWithRequest(e) {
  
      if(checkUrl(e.url)) {
  
          let Router = this.props.navigator.props.router;
          let route = Router.getRouteFromUrl(e.url);
          this.props.navigator.push(route);
  
          return false;
  
      }
  
      return true;
  }  
  </code></pre>
  
  <p>I'm getting the event (e) and can check what url it's trying to load. I can even check with e.navigationType if it was a click or whatever. </p>
  
  <p>Now on Android this function does not exists. On the native side there is the function <code>shouldOverrideUrlLoading</code> but this function is not implemented in react-native. 
  I found the following GitHub issue / PR <a href="https://github.com/facebook/react-native/pull/6478" rel="nofollow noreferrer">https://github.com/facebook/react-native/pull/6478</a> 
  I guess now, because this issue is closed and there are explanations for therefore, this function don't get implemented. </p>
  
  <p>So I started to find a way by myself. I created a Native UI Component which displays a WebView and then implement this method.</p>
  
  <p>CustomWebViewManager.java:</p>
  
  <pre><code>package ch.mypackage;
  
  import android.support.annotation.Nullable;
  import android.webkit.WebView;
  
  import com.facebook.react.uimanager.SimpleViewManager;
  import com.facebook.react.uimanager.ThemedReactContext;
  import com.facebook.react.uimanager.annotations.ReactProp;
  
  public class CustomWebViewManager extends SimpleViewManager&lt;CplusWebView&gt; {
  
      @Override
      public String getName() {
          return "CplusWebView";
      }
  
      @Override
      protected CustomWebView createViewInstance(ThemedReactContext reactContext) {
          return new CustomWebView(reactContext);
      }
  
      @ReactProp(name = "url")
      public void setUrl(CustomWebView view, @Nullable String url) {
          view.loadUrl(url);
      }
  
      @ReactProp(name = "javascriptEnabled")
      public void setJavascriptEnabled(CustomWebView view, boolean enabled) {
          view.getSettings().setJavaScriptEnabled(enabled);
      }
  
  }
  </code></pre>
  
  <p>CustomWebView.java</p>
  
  <pre><code>package ch.couponplus;
  
  import android.util.Log;
  import android.webkit.WebView;
  import android.webkit.WebViewClient;
  
  import com.facebook.react.bridge.Arguments;
  import com.facebook.react.bridge.ReactContext;
  import com.facebook.react.bridge.WritableMap;
  import com.facebook.react.uimanager.ThemedReactContext;
  import com.facebook.react.uimanager.events.EventDispatcher;
  import com.facebook.react.uimanager.events.RCTEventEmitter;
  
  public class CustomWebView extends WebView {
  
      EventDispatcher eventDispatcher;
      EventWebClient eventWebClient;
  
      public CustomWebView(ThemedReactContext reactContext) {
          super(reactContext);
          eventWebClient = new EventWebClient();
          setWebViewClient(eventWebClient);
      }
  
      protected class EventWebClient extends WebViewClient {
  
          @Override
          public boolean shouldOverrideUrlLoading(WebView view, String url) {
  
              WritableMap event = Arguments.createMap();
              event.putString("message", "MyMessage");
              ReactContext reactContext = (ReactContext)getContext();
              reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                      getId(),
                      "topChange",
                      event);
  
              return true;
          }
  
      }
  
  }
  </code></pre>
  
  <p>It works as expected. I can now trigger the <code>shouldOverrideUrlLoading</code> function in JS and make logs or whatever. </p>
  
  <p>But my question is how can I now set <code>true</code> or <code>false</code> in Javascript to control my <code>shouldOverrideUrlLoading</code> function? And is there a possibility to make my own functions available? Until now I only managed to trigger the <code>onChange</code> event? </p>
  
  <p>I just want to make the same as I made in iOS. Maybe someone comes up and tells me that this isn't possible for whatever reason but how should I or how do you handle cases like this? I know there are Url schemas but so much I know they don't work in this case. </p>