Merge branch 'typscript-migration' of https://github.com/react-native-community/react-native-webview into typscript-migration

.eslintrc.js

     // Remove this rule because we only destructure props, but never state
     'react/destructuring-assignment': 'off',
 
+    'no-unused-vars': 'error',
+    'typescript/no-unused-vars': 'error',
     'typescript/adjacent-overload-signatures': 'error',
-    'typescript/explicit-function-return-type': 'error',
     'typescript/no-angle-bracket-type-assertion': 'error',
     'typescript/no-empty-interface': 'error',
     'typescript/no-explicit-any': 'error',
     'typescript/no-triple-slash-reference': 'error',
     'typescript/prefer-namespace-keyword': 'error',
     'typescript/type-annotation-spacing': 'error',
-
-    'no-unused-vars': 'off',
   },
   settings: {
     'import/resolver': {

android/build.gradle

 
 repositories {
     mavenCentral()
+    jcenter()
     maven {
         url 'https://maven.google.com/'
         name 'Google'

android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java

 import android.webkit.JavascriptInterface;
 import android.webkit.ValueCallback;
 import android.webkit.WebChromeClient;
+import android.webkit.WebResourceRequest;
 import android.webkit.WebSettings;
 import android.webkit.WebView;
 import android.webkit.WebViewClient;
 import com.facebook.react.uimanager.events.ContentSizeChangeEvent;
 import com.facebook.react.uimanager.events.Event;
 import com.facebook.react.uimanager.events.EventDispatcher;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
 import com.reactnativecommunity.webview.events.TopLoadingErrorEvent;
 import com.reactnativecommunity.webview.events.TopLoadingFinishEvent;
 import com.reactnativecommunity.webview.events.TopLoadingStartEvent;
 import com.reactnativecommunity.webview.events.TopMessageEvent;
 import com.reactnativecommunity.webview.events.TopLoadingProgressEvent;
+import com.reactnativecommunity.webview.events.TopShouldStartLoadWithRequestEvent;
+import java.io.UnsupportedEncodingException;
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.Locale;
+import java.util.Map;
+import javax.annotation.Nullable;
 import org.json.JSONException;
 import org.json.JSONObject;
 
  *  - GO_BACK
  *  - GO_FORWARD
  *  - RELOAD
+ *  - LOAD_URL
  *
  * {@link WebView} instances could emit following direct events:
  *  - topLoadingFinish
  *  - topLoadingStart
  *  - topLoadingStart
  *  - topLoadingProgress
+ *  - topShouldStartLoadWithRequest
  *
  * Each event will carry the following properties:
  *  - target - view's react tag
   public static final int COMMAND_STOP_LOADING = 4;
   public static final int COMMAND_POST_MESSAGE = 5;
   public static final int COMMAND_INJECT_JAVASCRIPT = 6;
+  public static final int COMMAND_LOAD_URL = 7;
 
   // Use `webView.loadUrl("about:blank")` to reliably reset the view
   // state and release page resources (including any running JavaScript).
 
     protected boolean mLastLoadFailed = false;
     protected @Nullable ReadableArray mUrlPrefixesForDefaultIntent;
-    protected @Nullable List<Pattern> mOriginWhitelist;
 
     @Override
     public void onPageFinished(WebView webView, String url) {
 
     @Override
     public boolean shouldOverrideUrlLoading(WebView view, String url) {
-      if (url.equals(BLANK_URL)) return false;
-
-      // url blacklisting
-      if (mUrlPrefixesForDefaultIntent != null && mUrlPrefixesForDefaultIntent.size() > 0) {
-        ArrayList<Object> urlPrefixesForDefaultIntent =
-            mUrlPrefixesForDefaultIntent.toArrayList();
-        for (Object urlPrefix : urlPrefixesForDefaultIntent) {
-          if (url.startsWith((String) urlPrefix)) {
-            launchIntent(view.getContext(), url);
-            return true;
-          }
-        }
-      }
-
-      if (mOriginWhitelist != null && shouldHandleURL(mOriginWhitelist, url)) {
-        return false;
-      }
-
-      launchIntent(view.getContext(), url);
+      dispatchEvent(view, new TopShouldStartLoadWithRequestEvent(view.getId(), url));
       return true;
     }
 
-    private void launchIntent(Context context, String url) {
-      try {
-        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
-        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
-        intent.addCategory(Intent.CATEGORY_BROWSABLE);
-        context.startActivity(intent);
-      } catch (ActivityNotFoundException e) {
-        FLog.w(ReactConstants.TAG, "activity not found to handle uri scheme for: " + url, e);
-      }
-    }
 
-    private boolean shouldHandleURL(List<Pattern> originWhitelist, String url) {
-      Uri uri = Uri.parse(url);
-      String scheme = uri.getScheme() != null ? uri.getScheme() : "";
-      String authority = uri.getAuthority() != null ? uri.getAuthority() : "";
-      String urlToCheck = scheme + "://" + authority;
-      for (Pattern pattern : originWhitelist) {
-        if (pattern.matcher(urlToCheck).matches()) {
-          return true;
-        }
-      }
-      return false;
+    @TargetApi(Build.VERSION_CODES.N)
+    @Override
+    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
+      dispatchEvent(view, new TopShouldStartLoadWithRequestEvent(view.getId(), request.getUrl().toString()));
+      return true;
     }
 
     @Override
     public void setUrlPrefixesForDefaultIntent(ReadableArray specialUrls) {
       mUrlPrefixesForDefaultIntent = specialUrls;
     }
-
-    public void setOriginWhitelist(List<Pattern> originWhitelist) {
-      mOriginWhitelist = originWhitelist;
-    }
   }
 
   /**
     view.getSettings().setGeolocationEnabled(isGeolocationEnabled != null && isGeolocationEnabled);
   }
 
-  @ReactProp(name = "originWhitelist")
-  public void setOriginWhitelist(
-    WebView view,
-    @Nullable ReadableArray originWhitelist) {
-    RNCWebViewClient client = ((RNCWebView) view).getRNCWebViewClient();
-    if (client != null && originWhitelist != null) {
-      List<Pattern> whiteList = new LinkedList<>();
-      for (int i = 0 ; i < originWhitelist.size() ; i++) {
-        whiteList.add(Pattern.compile(originWhitelist.getString(i)));
-      }
-      client.setOriginWhitelist(whiteList);
-    }
-  }
-
   @Override
   protected void addEventEmitters(ThemedReactContext reactContext, WebView view) {
     // Do not register default touch emitter and let WebView implementation handle touches
 
   @Override
   public Map getExportedCustomDirectEventTypeConstants() {
-    MapBuilder.Builder builder = MapBuilder.builder();
-    builder.put("topLoadingProgress", MapBuilder.of("registrationName", "onLoadingProgress"));
-    return builder.build();
+    Map export = super.getExportedCustomDirectEventTypeConstants();
+    if (export == null) {
+      export = MapBuilder.newHashMap();
+    }
+    export.put(TopLoadingProgressEvent.EVENT_NAME, MapBuilder.of("registrationName", "onLoadingProgress"));
+    export.put(TopShouldStartLoadWithRequestEvent.EVENT_NAME, MapBuilder.of("registrationName", "onShouldStartLoadWithRequest"));
+    return export;
   }
 
   @Override
         "reload", COMMAND_RELOAD,
         "stopLoading", COMMAND_STOP_LOADING,
         "postMessage", COMMAND_POST_MESSAGE,
-        "injectJavaScript", COMMAND_INJECT_JAVASCRIPT
+        "injectJavaScript", COMMAND_INJECT_JAVASCRIPT,
+        "loadUrl", COMMAND_LOAD_URL
       );
   }
 
         RNCWebView reactWebView = (RNCWebView) root;
         reactWebView.evaluateJavascriptWithFallback(args.getString(0));
         break;
+      case COMMAND_LOAD_URL:
+        if (args == null) {
+          throw new RuntimeException("Arguments for loading an url are null!");
+        }
+        root.loadUrl(args.getString(0));
+        break;
     }
   }
 

android/src/main/java/com/reactnativecommunity/webview/events/TopShouldStartLoadWithRequestEvent.java

+package com.reactnativecommunity.webview.events;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+public class TopShouldStartLoadWithRequestEvent extends Event<TopMessageEvent> {
+    public static final String EVENT_NAME = "topShouldStartLoadWithRequest";
+    private final String mUrl;
+
+    public TopShouldStartLoadWithRequestEvent(int viewId, String url) {
+        super(viewId);
+        mUrl = url;
+    }
+
+    @Override
+    public String getEventName() {
+        return EVENT_NAME;
+    }
+
+    @Override
+    public boolean canCoalesce() {
+        return false;
+    }
+
+    @Override
+    public short getCoalescingKey() {
+        // All events for a given view can be coalesced.
+        return 0;
+    }
+
+    @Override
+    public void dispatch(RCTEventEmitter rctEventEmitter) {
+        WritableMap data = Arguments.createMap();
+        data.putString("url", mUrl);
+        data.putString("navigationType", "other");
+        rctEventEmitter.receiveEvent(getViewTag(), EVENT_NAME, data);
+    }
+}

docs/Reference.md

 
 ### `injectedJavaScript`
 
-Set this to provide JavaScript that will be injected into the web page when the view loads.
+Set this to provide JavaScript that will be injected into the web page when the view loads. Make sure the string evaluates to a valid type (`true` works) and doesn't otherwise throw an exception.
 
 | Type   | Required |
 | ------ | -------- |

ios/RNCWKWebView.m

 #import "RNCWKWebView.h"
 #import <React/RCTConvert.h>
 #import <React/RCTAutoInsetsProtocol.h>
+#import <UIKit/UIKit.h>
 
 #import "objc/runtime.h"
 
-static NSTimer *keyboardTimer;
 static NSString *const MessageHanderName = @"ReactNative";
 
 // runtime trick to remove WKWebView keyboard default toolbar
     _automaticallyAdjustContentInsets = YES;
     _contentInset = UIEdgeInsetsZero;
   }
-
-  // Workaround for a keyboard dismissal bug present in iOS 12
-  // https://openradar.appspot.com/radar?id=5018321736957952
-  if (@available(iOS 12.0, *)) {
-    [[NSNotificationCenter defaultCenter]
-      addObserver:self
-      selector:@selector(keyboardWillHide)
-      name:UIKeyboardWillHideNotification object:nil];
-    [[NSNotificationCenter defaultCenter]
-      addObserver:self
-      selector:@selector(keyboardWillShow)
-      name:UIKeyboardWillShowNotification object:nil];
-  }
   return self;
 }
 
     [super removeFromSuperview];
 }
 
--(void)keyboardWillHide
-{
-    keyboardTimer = [NSTimer scheduledTimerWithTimeInterval:0 target:self selector:@selector(keyboardDisplacementFix) userInfo:nil repeats:false];
-    [[NSRunLoop mainRunLoop] addTimer:keyboardTimer forMode:NSRunLoopCommonModes];
-}
-
--(void)keyboardWillShow
-{
-    if (keyboardTimer != nil) {
-        [keyboardTimer invalidate];
-    }
-}
-
--(void)keyboardDisplacementFix
-{
-    // https://stackoverflow.com/a/9637807/824966
-    [UIView animateWithDuration:.25 animations:^{
-        self.webView.scrollView.contentOffset = CGPointMake(0, 0);
-    }];
-}
-
 - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
     if ([keyPath isEqual:@"estimatedProgress"] && object == self.webView) {
         if(_onLoadingProgress){
 
 #pragma mark - WKNavigationDelegate methods
 
+/**
+* alert
+*/
+- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler 
+{ 
+    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"" message:message preferredStyle:UIAlertControllerStyleAlert];
+    [alert addAction:[UIAlertAction actionWithTitle:@"Ok" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) {
+        completionHandler();
+    }]];
+    [[self topViewController] presentViewController:alert animated:YES completion:NULL];
+
+}
+
+/**
+* confirm
+*/
+- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler{
+    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"" message:message preferredStyle:UIAlertControllerStyleAlert];
+    [alert addAction:[UIAlertAction actionWithTitle:@"Ok" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) {
+        completionHandler(YES);
+    }]];
+    [alert addAction:[UIAlertAction actionWithTitle:@"Cancel" style:UIAlertActionStyleCancel handler:^(UIAlertAction *action) {
+        completionHandler(NO);
+    }]];
+    [[self topViewController] presentViewController:alert animated:YES completion:NULL];
+}
+
+/**
+* prompt
+*/
+- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString *))completionHandler{
+    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"" message:prompt preferredStyle:UIAlertControllerStyleAlert];
+    [alert addTextFieldWithConfigurationHandler:^(UITextField *textField) {
+        textField.textColor = [UIColor lightGrayColor];
+        textField.placeholder = defaultText;
+    }];
+    [alert addAction:[UIAlertAction actionWithTitle:@"Ok" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) {
+        completionHandler([[alert.textFields lastObject] text]);
+    }]];
+    [[self topViewController] presentViewController:alert animated:YES completion:NULL];
+}
+
+/**
+ * topViewController
+ */
+-(UIViewController *)topViewController{
+   UIViewController *controller = [self topViewControllerWithRootViewController:[self getCurrentWindow].rootViewController];
+   return controller;
+}
+
+/**
+ * topViewControllerWithRootViewController
+ */
+-(UIViewController *)topViewControllerWithRootViewController:(UIViewController *)viewController{
+  if (viewController==nil) return nil;
+  if (viewController.presentedViewController!=nil) {
+    return [self topViewControllerWithRootViewController:viewController.presentedViewController];
+  } else if ([viewController isKindOfClass:[UITabBarController class]]){
+    return [self topViewControllerWithRootViewController:[(UITabBarController *)viewController selectedViewController]];
+  } else if ([viewController isKindOfClass:[UINavigationController class]]){
+    return [self topViewControllerWithRootViewController:[(UINavigationController *)viewController visibleViewController]];
+  } else {
+    return viewController;
+  }
+}
+/**
+ * getCurrentWindow
+ */
+-(UIWindow *)getCurrentWindow{
+  UIWindow *window = [UIApplication sharedApplication].keyWindow;
+  if (window.windowLevel!=UIWindowLevelNormal) {
+    for (UIWindow *wid in [UIApplication sharedApplication].windows) {
+      if (window.windowLevel==UIWindowLevelNormal) {
+        window = wid;
+        break;
+      }
+    }
+  }
+  return window;
+}
+
+
 /**
  * Decides whether to allow or cancel a navigation.
  * @see https://fburl.com/42r9fxob
           thenCall: (void (^)(NSString*)) callback
 {
   [self.webView evaluateJavaScript: js completionHandler: ^(id result, NSError *error) {
-    if (error == nil && callback != nil) {
-      callback([NSString stringWithFormat:@"%@", result]);
+    if (error == nil) {
+      if (callback != nil) {
+        callback([NSString stringWithFormat:@"%@", result]);
+      }
+    } else {
+      RCTLogError(@"Error evaluating injectedJavaScript: This is possibly due to an unsupported return type. Try adding true to the end of your injectedJavaScript string.");
     }
   }];
 }

package.json

     "Thibault Malbranche <malbranche.thibault@gmail.com>"
   ],
   "license": "MIT",
-  "version": "2.13.0",
+  "version": "2.14.3",
   "homepage": "https://github.com/react-native-community/react-native-webview#readme",
   "scripts": {
     "ci:publish": "yarn semantic-release",
     "react-native": "0.57.5",
     "semantic-release": "15.10.3",
     "typescript": "3.1.6",
-    "typescript-eslint-parser": "21.0.1"
+    "typescript-eslint-parser": "21.0.2"
   },
   "repository": {
     "type": "git",

src/WebView.android.tsx

 
 import {
   ActivityIndicator,
+  Image,
+  requireNativeComponent,
   StyleSheet,
   UIManager,
   View,
-  requireNativeComponent,
   NativeModules,
-  Image,
-  NativeSyntheticEvent,
   findNodeHandle,
+  NativeSyntheticEvent,
 } from 'react-native';
 
 import invariant from 'invariant';
 
-import WebViewShared from './WebViewShared';
+import {
+  defaultOriginWhitelist,
+  createOnShouldStartLoadWithRequest,
+} from './WebViewShared';
 import {
   WebViewSourceUri,
   WebViewError,
   WebViewErrorEvent,
   WebViewMessageEvent,
   WebViewNavigationEvent,
+  WebViewProgressEvent,
   WebViewSharedProps,
   WebViewSource,
-  WebViewProgressEvent,
 } from './types/WebViewTypes';
 
+const RNCWebView = requireNativeComponent('RNCWebView');
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
 ): source is WebViewSourceUri =>
   typeof source !== 'number' && !('html' in source);
 
-const defaultRenderLoading = (): React.ReactNode => (
+const defaultRenderLoading = () => (
   <View style={styles.loadingView}>
     <ActivityIndicator style={styles.loadingProgressBar} />
   </View>
   lastErrorEvent: WebViewError | null;
 };
 
-const RNCWebView = requireNativeComponent('RNCWebView');
-
 /**
  * Renders a native WebView.
  */
-export default class WebView extends React.Component<
-  WebViewSharedProps,
-  State
-> {
+class WebView extends React.Component<WebViewSharedProps, State> {
   static defaultProps = {
     overScrollMode: 'always',
     javaScriptEnabled: true,
     scalesPageToFit: true,
     allowFileAccess: false,
     saveFormDataDisabled: false,
-    originWhitelist: WebViewShared.defaultOriginWhitelist,
+    originWhitelist: defaultOriginWhitelist,
   };
 
-  static isFileUploadSupported = async (): Promise<boolean> =>
+  static isFileUploadSupported = async () =>
     // native implementation should return "true" only for Android 5+
     NativeModules.RNCWebView.isFileUploadSupported();
 
 
   webViewRef = React.createRef<React.ComponentClass>();
 
-  goForward = (): void => {
+  goForward = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       UIManager.RNCWebView.Commands.goForward,
     );
   };
 
-  goBack = (): void => {
+  goBack = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       UIManager.RNCWebView.Commands.goBack,
     );
   };
 
-  reload = (): void => {
+  reload = () => {
     this.setState({
       viewState: WebViewState.LOADING,
     });
     );
   };
 
-  stopLoading = (): void => {
+  stopLoading = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       UIManager.RNCWebView.Commands.stopLoading,
     );
   };
 
-  postMessage = (data: string): void => {
+  postMessage = (data: string) => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       UIManager.RNCWebView.Commands.postMessage,
    * on pages with a Content Security Policy that disallows eval(). If you need that
    * functionality, look into postMessage/onMessage.
    */
-  injectJavaScript = (data: string): void => {
+  injectJavaScript = (data: string) => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       UIManager.RNCWebView.Commands.injectJavaScript,
    * We return an event with a bunch of fields including:
    *  url, title, loading, canGoBack, canGoForward
    */
-  updateNavigationState = (event: WebViewNavigationEvent): void => {
+  updateNavigationState = (event: WebViewNavigationEvent) => {
     if (this.props.onNavigationStateChange) {
       this.props.onNavigationStateChange(event.nativeEvent);
     }
   getWebViewHandle = (): number | null =>
     findNodeHandle(this.webViewRef.current);
 
-  onLoadingStart = (event: WebViewNavigationEvent): void => {
+  onLoadingStart = (event: WebViewNavigationEvent) => {
     const { onLoadStart } = this.props;
     if (onLoadStart) {
       onLoadStart(event);
     this.updateNavigationState(event);
   };
 
-  onLoadingError = (event: WebViewErrorEvent): void => {
+  onLoadingError = (event: WebViewErrorEvent) => {
     event.persist(); // persist this event because we need to store it
     const { onError, onLoadEnd } = this.props;
     if (onError) {
     }
     // eslint-disable-next-line no-console
     console.warn('Encountered an error loading page', event.nativeEvent);
-
     this.setState({
       lastErrorEvent: event.nativeEvent,
       viewState: WebViewState.ERROR,
     });
   };
 
-  onLoadingFinish = (event: WebViewNavigationEvent): void => {
+  onLoadingFinish = (event: WebViewNavigationEvent) => {
     const { onLoad, onLoadEnd } = this.props;
     if (onLoad) {
       onLoad(event);
     this.updateNavigationState(event);
   };
 
-  onMessage = (event: WebViewMessageEvent): void => {
+  onMessage = (event: WebViewMessageEvent) => {
     const { onMessage } = this.props;
     if (onMessage) {
       onMessage(event);
     }
   };
 
-  onLoadingProgress = (
-    event: NativeSyntheticEvent<WebViewProgressEvent>,
-  ): void => {
+  onLoadingProgress = (event: NativeSyntheticEvent<WebViewProgressEvent>) => {
     const { onLoadProgress } = this.props;
     if (onLoadProgress) {
       onLoadProgress(event);
     }
   };
 
-  render(): React.ReactNode {
+  onShouldStartLoadWithRequestCallback = (
+    shouldStart: boolean,
+    url: string,
+  ) => {
+    if (shouldStart) {
+      UIManager.dispatchViewManagerCommand(
+        this.getWebViewHandle(),
+        UIManager.RNCWebView.Commands.loadUrl,
+        [String(url)],
+      );
+    }
+  };
+
+  render() {
     let otherView = null;
 
     if (this.state.viewState === WebViewState.LOADING) {
         invariant(errorEvent != null, 'lastErrorEvent expected to be non-null');
       }
     } else if (this.state.viewState !== WebViewState.IDLE) {
-      // eslint-disable-next-line no-console
       console.error(
         `RNCWebView invalid state encountered: ${this.state.viewState}`,
       );
 
     if (isWebViewUriSource(source)) {
       if (source.method === 'POST' && source.headers) {
-        // eslint-disable-next-line no-console
         console.warn(
           'WebView: `source.headers` is not supported when using POST.',
         );
       } else if (source.method === 'GET' && source.body) {
-        // eslint-disable-next-line no-console
         console.warn('WebView: `source.body` is not supported when using GET.');
       }
     }
 
     const nativeConfig = this.props.nativeConfig || {};
 
-    const originWhitelist = (this.props.originWhitelist || []).map(
-      WebViewShared.originWhitelistToRegex,
-    );
-
     const NativeWebView = nativeConfig.component || RNCWebView;
 
+    const onShouldStartLoadWithRequest = createOnShouldStartLoadWithRequest(
+      this.onShouldStartLoadWithRequestCallback,
+      this.props.originWhitelist,
+      this.props.onShouldStartLoadWithRequest,
+    );
+
     const webView = (
       <NativeWebView
         ref={this.webViewRef}
         automaticallyAdjustContentInsets={
           this.props.automaticallyAdjustContentInsets
         }
+        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
         onContentSizeChange={this.props.onContentSizeChange}
         onLoadingStart={this.onLoadingStart}
         onLoadingFinish={this.onLoadingFinish}
         allowUniversalAccessFromFileURLs={
           this.props.allowUniversalAccessFromFileURLs
         }
-        originWhitelist={originWhitelist}
         mixedContentMode={this.props.mixedContentMode}
         saveFormDataDisabled={this.props.saveFormDataDisabled}
         urlPrefixesForDefaultIntent={this.props.urlPrefixesForDefaultIntent}
     );
   }
 }
+
+export default WebView;

src/WebView.ios.tsx

 import React from 'react';
 import {
   ActivityIndicator,
-  Linking,
   StyleSheet,
   Text,
   UIManager,
 
 import invariant from 'invariant';
 
-import WebViewShared from './WebViewShared';
+import {
+  defaultOriginWhitelist,
+  createOnShouldStartLoadWithRequest,
+} from './WebViewShared';
+
 import {
   WebViewSourceUri,
   WebViewError,
-  WebViewIOSLoadRequestEvent,
   WebViewErrorEvent,
   WebViewMessageEvent,
   WebViewNavigationEvent,
   WebViewProgressEvent,
 } from './types/WebViewTypes';
 
-type DecelerationRate = number | 'normal' | 'fast';
-
-// Imported from https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/processDecelerationRate.js
-function processDecelerationRate(
-  decelerationRate?: DecelerationRate,
-): number | undefined {
-  if (decelerationRate === 'normal') {
-    return 0.998;
-  }
-  if (decelerationRate === 'fast') {
-    return 0.99;
-  }
-  return decelerationRate;
-}
-
-const { RNCWKWebViewManager, RNCUIWebViewManager } = NativeModules;
-
 const BGWASH = 'rgba(255,255,255,0.8)';
 
 const styles = StyleSheet.create({
   },
 });
 
+type DecelerationRate = number | 'normal' | 'fast';
+
+// Imported from https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/processDecelerationRate.js
+function processDecelerationRate(
+  decelerationRate?: DecelerationRate,
+): number | undefined {
+  if (decelerationRate === 'normal') {
+    return 0.998;
+  }
+  if (decelerationRate === 'fast') {
+    return 0.99;
+  }
+  return decelerationRate;
+}
+
+const { RNCWKWebViewManager, RNCUIWebViewManager } = NativeModules;
+const RNCUIWebView = requireNativeComponent('RNCUIWebView');
+const RNCWKWebView = requireNativeComponent('RNCWKWebView');
+
 const WebViewState: {
   IDLE: 'IDLE';
   LOADING: 'LOADING';
   lastErrorEvent: WebViewError | null;
 };
 
-const defaultRenderLoading = (): React.ReactNode => (
+const DataDetectorTypes = [
+  'phoneNumber',
+  'link',
+  'address',
+  'calendarEvent',
+  'trackingNumber',
+  'flightNumber',
+  'lookupSuggestion',
+  'none',
+  'all',
+];
+
+const defaultRenderLoading = () => (
   <View style={styles.loadingView}>
     <ActivityIndicator />
   </View>
   errorDomain: string | undefined,
   errorCode: number,
   errorDesc: string,
-): React.ReactNode => (
+) => (
   <View style={styles.errorContainer}>
     <Text style={styles.errorTextTitle}>Error loading page</Text>
     <Text style={styles.errorText}>{`Domain: ${errorDomain}`}</Text>
   </View>
 );
 
-const RNCUIWebView = requireNativeComponent('RNCUIWebView');
-const RNCWKWebView = requireNativeComponent('RNCWKWebView');
-
 /**
  * `WebView` renders web content in a native view.
  *
  * You can use this component to navigate back and forth in the web view's
  * history and configure various properties for the web content.
  */
-export default class WebView extends React.Component<
-  WebViewSharedProps,
-  State
-> {
+class WebView extends React.Component<WebViewSharedProps, State> {
   static JSNavigationScheme = JSNavigationScheme;
 
   static NavigationType = NavigationType;
 
   static defaultProps = {
     useWebKit: true,
-    originWhitelist: WebViewShared.defaultOriginWhitelist,
+    originWhitelist: defaultOriginWhitelist,
   };
 
-  static isFileUploadSupported = async (): Promise<boolean> =>
+  static isFileUploadSupported = async () =>
     // no native implementation for iOS, depends only on permissions
     true;
 
   webViewRef = React.createRef<React.ComponentClass>();
 
   // eslint-disable-next-line camelcase, react/sort-comp
-  UNSAFE_componentWillMount(): void {
+  UNSAFE_componentWillMount() {
     if (
       this.props.useWebKit === true
       && this.props.scalesPageToFit !== undefined
     ) {
-      // eslint-disable-next-line no-console
       console.warn(
         'The scalesPageToFit property is not supported when useWebKit = true',
       );
       !this.props.useWebKit
       && this.props.allowsBackForwardNavigationGestures
     ) {
-      // eslint-disable-next-line no-console
       console.warn(
         'The allowsBackForwardNavigationGestures property is not supported when useWebKit = false',
       );
     }
   }
 
-  componentDidUpdate(prevProps: WebViewSharedProps): void {
+  componentDidUpdate(prevProps: WebViewSharedProps) {
     if (!(prevProps.useWebKit && this.props.useWebKit)) {
       return;
     }
     this.showRedboxOnPropChanges(prevProps, 'dataDetectorTypes');
 
     if (this.props.scalesPageToFit !== undefined) {
-      // eslint-disable-next-line no-console
       console.warn(
         'The scalesPageToFit property is not supported when useWebKit = true',
       );
     }
   }
 
+  getCommands() {
+    if (!this.props.useWebKit) {
+      return UIManager.RNCUIWebView.Commands;
+    }
+
+    return UIManager.RNCWKWebView.Commands;
+  }
+
   /**
    * Go forward one page in the web view's history.
    */
-  goForward = (): void => {
+  goForward = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this.getCommands().goForward,
     );
   };
 
-  getCommands(): {
-    goForward: () => void;
-    goBack: () => void;
-    reload: () => void;
-    stopLoading: () => void;
-    postMessage: () => void;
-    injectJavaScript: () => void;
-  } {
-    if (!this.props.useWebKit) {
-      return UIManager.RNCUIWebView.Commands;
-    }
-
-    return UIManager.RNCWKWebView.Commands;
-  }
-
   /**
    * Go back one page in the web view's history.
    */
-  goBack = (): void => {
+  goBack = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this.getCommands().goBack,
   /**
    * Reloads the current page.
    */
-  reload = (): void => {
+  reload = () => {
     this.setState({ viewState: WebViewState.LOADING });
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
   /**
    * Stop loading the current page.
    */
-  stopLoading = (): void => {
+  stopLoading = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this.getCommands().stopLoading,
    * document.addEventListener('message', e => { document.title = e.data; });
    * ```
    */
-  postMessage = (data: string): void => {
+  postMessage = (data: string) => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this.getCommands().postMessage,
    * on pages with a Content Security Policy that disallows eval(). If you need that
    * functionality, look into postMessage/onMessage.
    */
-  injectJavaScript = (data: string): void => {
+  injectJavaScript = (data: string) => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this.getCommands().injectJavaScript,
    * We return an event with a bunch of fields including:
    *  url, title, loading, canGoBack, canGoForward
    */
-  updateNavigationState = (event: WebViewNavigationEvent): void => {
+  updateNavigationState = (event: WebViewNavigationEvent) => {
     if (this.props.onNavigationStateChange) {
       this.props.onNavigationStateChange(event.nativeEvent);
     }
   /**
    * Returns the native `WebView` node.
    */
-  getWebViewHandle = (): number | null =>
-    findNodeHandle(this.webViewRef.current);
+  getWebViewHandle = () => findNodeHandle(this.webViewRef.current);
 
-  onLoadingStart = (event: WebViewNavigationEvent): void => {
+  onLoadingStart = (event: WebViewNavigationEvent) => {
     const { onLoadStart } = this.props;
     if (onLoadStart) {
       onLoadStart(event);
     this.updateNavigationState(event);
   };
 
-  onLoadingError = (event: WebViewErrorEvent): void => {
+  onLoadingError = (event: WebViewErrorEvent) => {
     event.persist(); // persist this event because we need to store it
     const { onError, onLoadEnd } = this.props;
     if (onError) {
     }
     // eslint-disable-next-line no-console
     console.warn('Encountered an error loading page', event.nativeEvent);
-
     this.setState({
       lastErrorEvent: event.nativeEvent,
       viewState: WebViewState.ERROR,
     });
   };
 
-  onLoadingFinish = (event: WebViewNavigationEvent): void => {
+  onLoadingFinish = (event: WebViewNavigationEvent) => {
     const { onLoad, onLoadEnd } = this.props;
     if (onLoad) {
       onLoad(event);
     this.updateNavigationState(event);
   };
 
-  onMessage = (event: WebViewMessageEvent): void => {
+  onMessage = (event: WebViewMessageEvent) => {
     const { onMessage } = this.props;
     if (onMessage) {
       onMessage(event);
     }
   };
 
-  onLoadingProgress = (
-    event: NativeSyntheticEvent<WebViewProgressEvent>,
-  ): void => {
+  onLoadingProgress = (event: NativeSyntheticEvent<WebViewProgressEvent>) => {
     const { onLoadProgress } = this.props;
     if (onLoadProgress) {
       onLoadProgress(event);
     }
   };
 
-  showRedboxOnPropChanges(
+  onShouldStartLoadWithRequestCallback = (
+    shouldStart: boolean,
+    url: string,
+    lockIdentifier: number,
+  ) => {
+    const nativeConfig = this.props.nativeConfig || {};
+
+    let { viewManager } = nativeConfig;
+
+    if (this.props.useWebKit) {
+      viewManager = viewManager || RNCWKWebViewManager;
+    } else {
+      viewManager = viewManager || RNCUIWebViewManager;
+    }
+    invariant(viewManager != null, 'viewManager expected to be non-null');
+    viewManager.startLoadWithResult(!!shouldStart, lockIdentifier);
+  };
+
+  showRedboxOnPropChanges = (
     prevProps: WebViewSharedProps,
-    propName:
-      | 'allowsInlineMediaPlayback'
-      | 'mediaPlaybackRequiresUserAction'
-      | 'dataDetectorTypes',
-  ): void {
+    propName: keyof WebViewSharedProps,
+  ) => {
     if (this.props[propName] !== prevProps[propName]) {
-      // eslint-disable-next-line no-console
       console.error(
         `Changes to property ${propName} do nothing after the initial render.`,
       );
     }
-  }
+  };
 
-  render(): React.ReactNode {
+  render() {
     let otherView = null;
 
     let scalesPageToFit;
         invariant(errorEvent != null, 'lastErrorEvent expected to be non-null');
       }
     } else if (this.state.viewState !== WebViewState.IDLE) {
-      // eslint-disable-next-line no-console
       console.error(
         `RNCWebView invalid state encountered: ${this.state.viewState}`,
       );
 
     const nativeConfig = this.props.nativeConfig || {};
 
-    let { viewManager } = nativeConfig;
-
-    if (this.props.useWebKit) {
-      viewManager = viewManager || RNCWKWebViewManager;
-    } else {
-      viewManager = viewManager || RNCUIWebViewManager;
-    }
-
-    const compiledWhitelist = [
-      'about:blank',
-      ...(this.props.originWhitelist || []),
-    ].map(WebViewShared.originWhitelistToRegex);
-    const onShouldStartLoadWithRequest = (
-      event: NativeSyntheticEvent<WebViewIOSLoadRequestEvent>,
-    ): void => {
-      let shouldStart = true;
-      const { url } = event.nativeEvent;
-      const origin = WebViewShared.extractOrigin(url);
-      const passesWhitelist = compiledWhitelist.some(
-        (x): boolean => new RegExp(x).test(origin),
-      );
-      shouldStart = shouldStart && passesWhitelist;
-      if (!passesWhitelist) {
-        Linking.openURL(url);
-      }
-      if (this.props.onShouldStartLoadWithRequest) {
-        shouldStart
-          = shouldStart
-          && this.props.onShouldStartLoadWithRequest(event.nativeEvent);
-      }
-      invariant(viewManager != null, 'viewManager expected to be non-null');
-      viewManager.startLoadWithResult(
-        !!shouldStart,
-        event.nativeEvent.lockIdentifier,
-      );
-    };
+    const onShouldStartLoadWithRequest = createOnShouldStartLoadWithRequest(
+      this.onShouldStartLoadWithRequestCallback,
+      this.props.originWhitelist,
+      this.props.onShouldStartLoadWithRequest,
+    );
 
     const decelerationRate = processDecelerationRate(
       this.props.decelerationRate,
 
     const messagingEnabled = typeof this.props.onMessage === 'function';
 
-    const NativeWebView
-      = nativeConfig.component
-      || (this.props.useWebKit ? RNCWKWebView : RNCUIWebView);
+    let NativeWebView = nativeConfig.component;
+
+    if (this.props.useWebKit) {
+      NativeWebView = NativeWebView || RNCWKWebView;
+    } else {
+      NativeWebView = NativeWebView || RNCUIWebView;
+    }
 
     const webView = (
       <NativeWebView
     );
   }
 }
+
+export default WebView;

src/WebViewShared.ts

+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
 import escapeStringRegexp from 'escape-string-regexp';
+import { Linking } from 'react-native';
+import {
+  WebViewNavigationEvent,
+  WebViewNavigation,
+} from './types/WebViewTypes';
+
+const defaultOriginWhitelist = ['http://*', 'https://*'];
+
+const extractOrigin = (url: string): string => {
+  const result = /^[A-Za-z0-9]+:(\/\/)?[^/]*/.exec(url);
+  return result === null ? '' : result[0];
+};
+
+const originWhitelistToRegex = (originWhitelist: string): string =>
+  escapeStringRegexp(originWhitelist).replace(/\\\*/g, '.*');
+
+const passesWhitelist = (compiledWhitelist: Array<string>, url: string) => {
+  const origin = extractOrigin(url);
+  return compiledWhitelist.some(x => new RegExp(x).test(origin));
+};
+
+const compileWhitelist = (originWhitelist?: string[]): string[] =>
+  ['about:blank', ...(originWhitelist || [])].map(originWhitelistToRegex);
+
+const createOnShouldStartLoadWithRequest = (
+  loadRequest: (
+    shouldStart: boolean,
+    url: string,
+    lockIdentifier?: number,
+  ) => void,
+  originWhitelist?: string[],
+  onShouldStartLoadWithRequest?: (event: WebViewNavigation) => boolean,
+) => ({ nativeEvent }: WebViewNavigationEvent) => {
+  let shouldStart = true;
+  const { url, lockIdentifier } = nativeEvent;
 
-const WebViewShared = {
-  defaultOriginWhitelist: ['http://*', 'https://*'],
-  extractOrigin: (url: string): string => {
-    const result = /^[A-Za-z0-9]+:(\/\/)?[^/]*/.exec(url);
-    return result === null ? '' : result[0];
-  },
-  originWhitelistToRegex: (originWhitelist: string): string =>
-    escapeStringRegexp(originWhitelist).replace(/\\\*/g, '.*'),
+  if (!passesWhitelist(compileWhitelist(originWhitelist), url)) {
+    Linking.openURL(url);
+    shouldStart = false;
+  }
+
+  if (onShouldStartLoadWithRequest) {
+    shouldStart = onShouldStartLoadWithRequest(nativeEvent);
+  }
+
+  loadRequest(shouldStart, url, lockIdentifier);
 };
 
-export default WebViewShared;
+export {
+  defaultOriginWhitelist,
+  createOnShouldStartLoadWithRequest,
+  originWhitelistToRegex,
+};

src/types/WebViewTypes.ts

     | 'reload'
     | 'formresubmit'
     | 'other';
+  lockIdentifier?: number;
 }
 
 export interface WebViewMessage extends WebViewNativeEvent {
    */
   dataDetectorTypes?: DataDetectorTypes | DataDetectorTypes[];
 
-  /**
-   * Function that allows custom handling of any web view requests. Return
-   * `true` from the function to continue loading the request and `false`
-   * to stop loading.
-   * @platform ios
-   */
-  onShouldStartLoadWithRequest?: (event: WebViewIOSLoadRequestEvent) => any;
-
   /**
    * Boolean that determines whether HTML5 videos play inline or use the
    * native full-screen controller. The default value is `false`.
    */
   onNavigationStateChange?: (event: WebViewNavigation) => any;
 
+  /**
+   * Function that allows custom handling of any web view requests. Return
+   * `true` from the function to continue loading the request and `false`
+   * to stop loading.
+   * @platform ios
+   */
+  onShouldStartLoadWithRequest?: (
+    event: NativeSyntheticEvent<WebViewNavigation>,
+  ) => any;
+
   /**
    * A function that is invoked when the webview calls `window.postMessage`.
    * Setting this property will inject a `postMessage` global into your

yarn.lock

   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
 
-lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1:
+lodash@^4.17.10, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
 
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typescript-eslint-parser@21.0.1:
-  version "21.0.1"
-  resolved "https://registry.yarnpkg.com/typescript-eslint-parser/-/typescript-eslint-parser-21.0.1.tgz#710ea628a72144e1ec3a1d6b9f5b2b0a5a520e04"
+typescript-eslint-parser@21.0.2:
+  version "21.0.2"
+  resolved "https://registry.yarnpkg.com/typescript-eslint-parser/-/typescript-eslint-parser-21.0.2.tgz#270af10e4724528677fbcf34ea495284bec3a894"
+  integrity sha512-u+pj4RVJBr4eTzj0n5npoXD/oRthvfUCjSKndhNI714MG0mQq2DJw5WP7qmonRNIFgmZuvdDOH3BHm9iOjIAfg==
   dependencies:
     eslint-scope "^4.0.0"
     eslint-visitor-keys "^1.0.0"
-    lodash "^4.17.11"
-    typescript-estree "5.0.0"
+    typescript-estree "5.3.0"
 
-typescript-estree@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/typescript-estree/-/typescript-estree-5.0.0.tgz#6aaa33b96abf5edce165099630e2ccd997a95609"
+typescript-estree@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/typescript-estree/-/typescript-estree-5.3.0.tgz#fb6c977b5e21073eb16cbdc0338a7f752da99ff5"
+  integrity sha512-Vu0KmYdSCkpae+J48wsFC1ti19Hq3Wi/lODUaE+uesc3gzqhWbZ5itWbsjylLVbjNW4K41RqDzSfnaYNbmEiMQ==
   dependencies:
     lodash.unescape "4.0.1"
     semver "5.5.0"