Move WKWebView into WebView.ios.js

Summary: @public This diff adds the `useWebKit` property to the `<WebView/>` React Native component. On iOS, when this property is true, we use `RCTWKWebView`. Otherwise, we use `RCTWebView`. On Android, this property does nothing. Reviewed By: shergin Differential Revision: D6423374 fbshipit-source-id: 006bfaaf12984fac0174c0b5bb897c009c026cd0
facebook · Aug 16, 2018 · 95801f1 · 95801f1
1 parent bacfd92
commit 95801f1
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 31 deletions.
diff --git a/Libraries/Components/WKWebView/WKWebView.android.js b/Libraries/Components/WKWebView/WKWebView.android.js
diff --git a/Libraries/Components/WebView/WebView.android.js b/Libraries/Components/WebView/WebView.android.js
@@ -109,6 +109,12 @@ class WebView extends React.Component {
       PropTypes.number,
     ]),
 
+    /**
+     * If true, use WKWebView instead of UIWebView.
+     * @platform ios
+     */
+    useWebKit: PropTypes.bool,
+
     /**
      * Used on Android only, JS is enabled by default for WebView on iOS
      * @platform android

diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js
@@ -32,6 +32,7 @@ const requireNativeComponent = require('requireNativeComponent');
 const resolveAssetSource = require('resolveAssetSource');
 
 const RCTWebViewManager = require('NativeModules').WebViewManager;
+const RCTWKWebViewManager = require('NativeModules').WKWebViewManager;
 
 const BGWASH = 'rgba(255,255,255,0.8)';
 const RCT_WEBVIEW_REF = 'webview';
@@ -66,6 +67,9 @@ const DataDetectorTypes = [
   'link',
   'address',
   'calendarEvent',
+  'trackingNumber',
+  'flightNumber',
+  'lookupSuggestion',
   'none',
   'all',
 ];
@@ -162,6 +166,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.
      */
@@ -264,6 +274,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([
@@ -433,7 +448,13 @@ class WebView extends React.Component {
 
     const nativeConfig = this.props.nativeConfig || {};
 
-    const viewManager = nativeConfig.viewManager || RCTWebViewManager;
+    let viewManager = nativeConfig.viewManager;
+
+    if (this.props.useWebKit) {
+      viewManager = viewManager || RCTWKWebViewManager;
+    } else {
+      viewManager = viewManager || RCTWebViewManager;
+    }
 
     const compiledWhitelist = [
       'about:blank',
@@ -474,7 +495,13 @@ class WebView extends React.Component {
 
     const messagingEnabled = typeof this.props.onMessage === 'function';
 
-    const NativeWebView = nativeConfig.component || RCTWebView;
+    let NativeWebView = nativeConfig.component;
+
+    if (this.props.useWebKit) {
+      NativeWebView = NativeWebView || RCTWKWebView;
+    } else {
+      NativeWebView = NativeWebView || RCTWebView;
+    }
 
     const webView = (
       <NativeWebView
@@ -514,13 +541,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.RCTWebView.Commands.goForward,
+      this._getCommands().goForward,
       null,
     );
   };
@@ -531,7 +566,7 @@ class WebView extends React.Component {
   goBack = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RCTWebView.Commands.goBack,
+      this._getCommands().goBack,
       null,
     );
   };
@@ -543,7 +578,7 @@ class WebView extends React.Component {
     this.setState({viewState: WebViewState.LOADING});
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RCTWebView.Commands.reload,
+      this._getCommands().reload,
       null,
     );
   };
@@ -554,7 +589,7 @@ class WebView extends React.Component {
   stopLoading = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RCTWebView.Commands.stopLoading,
+      this._getCommands().stopLoading,
       null,
     );
   };
@@ -572,7 +607,7 @@ class WebView extends React.Component {
   postMessage = data => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RCTWebView.Commands.postMessage,
+      this._getCommands().postMessage,
       [String(data)],
     );
   };
@@ -586,7 +621,7 @@ class WebView extends React.Component {
   injectJavaScript = data => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RCTWebView.Commands.injectJavaScript,
+      this._getCommands().injectJavaScript,
       [data],
     );
   };
@@ -641,9 +676,36 @@ 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');
+  }
+
+  _showRedboxOnPropChanges(prevProps, propName: string) {
+    if (this.props[propName] !== prevProps[propName]) {
+      console.error(
+        `Changes to property ${propName} do nothing after the initial render.`,
+      );
+    }
+  }
 }
 
-const RCTWebView = requireNativeComponent('RCTWebView');
+const RCTWebView = requireNativeComponent(
+  'RCTWebView',
+  WebView,
+  WebView.extraNativeComponentConfig,
+);
+const RCTWKWebView = requireNativeComponent(
+  'RCTWKWebView',
+  WebView,
+  WebView.extraNativeComponentConfig,
+);
 
 const styles = StyleSheet.create({
   container: {