🦉 WIP: Update to WKWebView - WebView.ios.js

js/WebView.ios.js

@@ -1,3 +1,13 @@
+/**
+ * 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
+ * @noflow
+ */
+
 'use strict';
 
 import React from 'react';
@@ -73,6 +83,9 @@ const DataDetectorTypes = [
   'link',
   'address',
   'calendarEvent',
+  'trackingNumber',
+  'flightNumber',
+  'lookupSuggestion',
   'none',
   'all',
 ];
@@ -117,7 +130,7 @@ class WebView extends React.Component {
   static JSNavigationScheme = JSNavigationScheme;
   static NavigationType = NavigationType;
   static propTypes = {
-    ...ViewPropTypes,
+    ...DeprecatedViewPropTypes,
 
     html: deprecatedPropType(
       PropTypes.string,
@@ -169,6 +182,12 @@ class WebView extends React.Component {
       PropTypes.number,
     ]),
 
+    /**
+     * If true, use WKWebView instead of UIWebView.
+     * @platform ios
+     */
+    useWebKit: PropTypes.bool,
+
     /**
      * Function that returns a view to show if there's an error.
      */
@@ -254,7 +273,7 @@ class WebView extends React.Component {
     /**
      * The style to apply to the `WebView`.
      */
-    style: ViewPropTypes.style,
+    style: DeprecatedViewPropTypes.style,
 
     /**
      * Determines the types of data converted to clickable URLs in the web view's content.
@@ -271,6 +290,11 @@ class WebView extends React.Component {
      * - `'none'`
      * - `'all'`
      *
+     * With the new WebKit implementation, we have three new values:
+     * - `'trackingNumber'`,
+     * - `'flightNumber'`,
+     * - `'lookupSuggestion'`,
+     *
      * @platform ios
      */
     dataDetectorTypes: PropTypes.oneOfType([
@@ -316,6 +340,8 @@ class WebView extends React.Component {
      * Boolean that controls whether the web content is scaled to fit
      * the view and enables the user to change the scale. The default value
      * is `true`.
+     *
+     * On iOS, when `useWebKit=true`, this prop will not work.
      */
     scalesPageToFit: PropTypes.bool,
 
@@ -395,7 +421,6 @@ class WebView extends React.Component {
 
   static defaultProps = {
     originWhitelist: WebViewShared.defaultOriginWhitelist,
-    scalesPageToFit: true,
   };
 
   state = {
@@ -408,11 +433,28 @@ class WebView extends React.Component {
     if (this.props.startInLoadingState) {
       this.setState({ viewState: WebViewState.LOADING });
     }
+
+    if (
+      this.props.useWebKit === true &&
+      this.props.scalesPageToFit !== undefined
+    ) {
+      console.warn(
+        'The scalesPageToFit property is not supported when useWebKit = true',
+      );
+    }
   }
 
   render() {
     let otherView = null;
 
+    let scalesPageToFit;
+
+    if (this.props.useWebKit) {
+      ({ scalesPageToFit } = this.props);
+    } else {
+      ({ scalesPageToFit = true } = this.props);
+    }
+
     if (this.state.viewState === WebViewState.LOADING) {
       otherView = (this.props.renderLoading || defaultRenderLoading)();
     } else if (this.state.viewState === WebViewState.ERROR) {
@@ -425,7 +467,7 @@ class WebView extends React.Component {
       );
     } else if (this.state.viewState !== WebViewState.IDLE) {
       console.error(
-        'RNCWebView invalid state encountered: ' + this.state.loading,
+        'RCTWebView invalid state encountered: ' + this.state.loading,
       );
     }
 
@@ -440,11 +482,18 @@ class WebView extends React.Component {
 
     const nativeConfig = this.props.nativeConfig || {};
 
-    const viewManager = nativeConfig.viewManager || RNCWebViewManager;
+    let viewManager = nativeConfig.viewManager;
 
-    const compiledWhitelist = (this.props.originWhitelist || []).map(
-      WebViewShared.originWhitelistToRegex,
-    );
+    if (this.props.useWebKit) {
+      viewManager = viewManager || RCTWKWebViewManager;
+    } else {
+      viewManager = viewManager || RCTWebViewManager;
+    }
+
+    const compiledWhitelist = [
+      'about:blank',
+      ...(this.props.originWhitelist || []),
+    ].map(WebViewShared.originWhitelistToRegex);
     const onShouldStartLoadWithRequest = (event) => {
       let shouldStart = true;
       const { url } = event.nativeEvent;
@@ -480,7 +529,13 @@ class WebView extends React.Component {
 
     const messagingEnabled = typeof this.props.onMessage === 'function';
 
-    const NativeWebView = nativeConfig.component || RNCWebView;
+    let NativeWebView = nativeConfig.component;
+
+    if (this.props.useWebKit) {
+      NativeWebView = NativeWebView || RCTWKWebView;
+    } else {
+      NativeWebView = NativeWebView || RCTWebView;
+    }
 
     const webView = (
       <NativeWebView
@@ -502,7 +557,7 @@ class WebView extends React.Component {
         messagingEnabled={messagingEnabled}
         onMessage={this._onMessage}
         onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
-        scalesPageToFit={this.props.scalesPageToFit}
+        scalesPageToFit={scalesPageToFit}
         allowsInlineMediaPlayback={this.props.allowsInlineMediaPlayback}
         mediaPlaybackRequiresUserAction={
           this.props.mediaPlaybackRequiresUserAction
@@ -520,13 +575,21 @@ class WebView extends React.Component {
     );
   }
 
+  _getCommands() {
+    if (!this.props.useWebKit) {
+      return UIManager.RCTWebView.Commands;
+    }
+
+    return UIManager.RCTWKWebView.Commands;
+  }
+
   /**
    * Go forward one page in the web view's history.
    */
   goForward = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RNCWebView.Commands.goForward,
+      this._getCommands().goForward,
       null,
     );
   };
@@ -537,7 +600,7 @@ class WebView extends React.Component {
   goBack = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RNCWebView.Commands.goBack,
+      this._getCommands().goBack,
       null,
     );
   };
@@ -549,7 +612,7 @@ class WebView extends React.Component {
     this.setState({ viewState: WebViewState.LOADING });
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RNCWebView.Commands.reload,
+      this._getCommands().reload,
       null,
     );
   };
@@ -560,7 +623,7 @@ class WebView extends React.Component {
   stopLoading = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RNCWebView.Commands.stopLoading,
+      this._getCommands().stopLoading,
       null,
     );
   };
@@ -578,7 +641,7 @@ class WebView extends React.Component {
   postMessage = data => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RNCWebView.Commands.postMessage,
+      this._getCommands().postMessage,
       [String(data)],
     );
   };
@@ -592,7 +655,7 @@ class WebView extends React.Component {
   injectJavaScript = data => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RNCWebView.Commands.injectJavaScript,
+      this._getCommands().injectJavaScript,
       [data],
     );
   };
@@ -647,9 +710,42 @@ class WebView extends React.Component {
     const { onMessage } = this.props;
     onMessage && onMessage(event);
   };
+
+  componentDidUpdate(prevProps) {
+    if (!(prevProps.useWebKit && this.props.useWebKit)) {
+      return;
+    }
+
+    this._showRedboxOnPropChanges(prevProps, 'allowsInlineMediaPlayback');
+    this._showRedboxOnPropChanges(prevProps, 'mediaPlaybackRequiresUserAction');
+    this._showRedboxOnPropChanges(prevProps, 'dataDetectorTypes');
+
+    if (this.props.scalesPageToFit !== undefined) {
+      console.warn(
+        'The scalesPageToFit property is not supported when useWebKit = true',
+      );
+    }
+  }
+
+  _showRedboxOnPropChanges(prevProps, propName: string) {
+    if (this.props[propName] !== prevProps[propName]) {
+      console.error(
+        `Changes to property ${propName} do nothing after the initial render.`,
+      );
+    }
+  }
 }
 
-const RNCWebView = requireNativeComponent('RNCWebView');
+const RCTWebView = requireNativeComponent(
+  'RCTWebView',
+  WebView,
+  WebView.extraNativeComponentConfig,
+);
+const RCTWKWebView = requireNativeComponent(
+  'RCTWKWebView',
+  WebView,
+  WebView.extraNativeComponentConfig,
+);
 
 const styles = StyleSheet.create({
   container: {