Implemented stopLoading

Summary:**Motivation:** In my app, I'm using a WebView that loads content from my mobile site.  What I want to do is when a user presses a link on the loaded page, I want to stop the WebView's request, hijack the URL and open the URL in a new WebView, pushed to the top of the navigator stack.  To me, this gives the overall app a more native feel, instead of implementing a rudimentary navbar on the main WebView to go back.

**Attempted Workarounds:** I've attempted to get similar functionality by capturing the onNavigationStateChange event in the WebView, and then within calling goBack + pushing the new view to the navigator stack.  From a functionality standpoint, this works.  However, from a UI standpoint, the user can clearly see the webview change states to a new page + go back before having the new view pushed on top of their nav stack.
Closes facebook#6886

Differential Revision: D3212447

Pulled By: mkonicek

fb-gh-sync-id: 05911e583d9ba54ddbd54a772153c80ed227731e
fbshipit-source-id: 05911e583d9ba54ddbd54a772153c80ed227731e

Libraries/Components/WebView/WebView.android.js

@@ -264,6 +264,14 @@ var WebView = React.createClass({
     );
   },
 
+  stopLoading: function() {
+    UIManager.dispatchViewManagerCommand(
+      this.getWebViewHandle(),
+      UIManager.RCTWebView.Commands.stopLoading,
+      null
+    );
+  },
+
   /**
    * We return an event with a bunch of fields including:
    *  url, title, loading, canGoBack, canGoForward

Libraries/Components/WebView/WebView.ios.js

@@ -362,6 +362,14 @@ var WebView = React.createClass({
     );
   },
 
+  stopLoading: function() {
+    UIManager.dispatchViewManagerCommand(
+      this.getWebViewHandle(),
+      UIManager.RCTWebView.Commands.stopLoading,
+      null
+    );
+  },
+
   /**
    * We return an event with a bunch of fields including:
    *  url, title, loading, canGoBack, canGoForward

React/Views/RCTWebView.h

@@ -40,5 +40,6 @@ shouldStartLoadForRequest:(NSMutableDictionary<NSString *, id> *)request
 - (void)goForward;
 - (void)goBack;
 - (void)reload;
+- (void)stopLoading;
 
 @end

React/Views/RCTWebView.m

@@ -77,6 +77,11 @@ - (void)reload
   }
 }
 
+- (void)stopLoading
+{
+  [_webView stopLoading];
+}
+
 - (void)setSource:(NSDictionary *)source
 {
   if (![_source isEqualToDictionary:source]) {

React/Views/RCTWebViewManager.m

@@ -85,6 +85,18 @@ - (UIView *)view
   }];
 }
 
+RCT_EXPORT_METHOD(stopLoading:(nonnull NSNumber *)reactTag)
+{
+  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, RCTWebView *> *viewRegistry) {
+    RCTWebView *view = viewRegistry[reactTag];
+    if (![view isKindOfClass:[RCTWebView class]]) {
+      RCTLogError(@"Invalid view returned from registry, expecting RCTWebView, got: %@", view);
+    } else {
+      [view stopLoading];
+    }
+  }];
+}
+
 #pragma mark - Exported synchronous methods
 
 - (BOOL)webView:(__unused RCTWebView *)webView

ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java

@@ -75,6 +75,7 @@ public class ReactWebViewManager extends SimpleViewManager<WebView> {
   public static final int COMMAND_GO_BACK = 1;
   public static final int COMMAND_GO_FORWARD = 2;
   public static final int COMMAND_RELOAD = 3;
+  public static final int COMMAND_STOP_LOADING = 4;
 
   // Use `webView.loadUrl("about:blank")` to reliably reset the view
   // state and release page resources (including any running JavaScript).
@@ -350,7 +351,8 @@ protected void addEventEmitters(ThemedReactContext reactContext, WebView view) {
     return MapBuilder.of(
         "goBack", COMMAND_GO_BACK,
         "goForward", COMMAND_GO_FORWARD,
-        "reload", COMMAND_RELOAD);
+        "reload", COMMAND_RELOAD,
+        "stopLoading", COMMAND_STOP_LOADING);
   }
 
   @Override
@@ -365,6 +367,9 @@ public void receiveCommand(WebView root, int commandId, @Nullable ReadableArray
       case COMMAND_RELOAD:
         root.reload();
         break;
+      case COMMAND_STOP_LOADING:
+        root.stopLoading();
+        break;
     }
   }