From b18fddadfeae5512690a0a059a4fa80c864f43a3 Mon Sep 17 00:00:00 2001
From: Ramanpreet Nara <ramanpreet@fb.com>
Date: Thu, 16 Aug 2018 13:34:31 -0700
Subject: [PATCH] Warn when 'scalesPageToFit' prop is used

Summary:
@public

The `WKWebView` class doesn't expose a `scalesPageToFit` property, unlike `UIWebView`. Therefore, the `scalesPageToFit` RN prop is be a bit tricky to implement with `WKWebView`.

For the time being, this diff adds warnings to `<WebView/>` whenever `useWebKit={true}` and `scalesPageToFit` is set. I've also updated the documentation to reflect that we don't support `scalesPageToFit` prop with the new implementation of `<WebView/>`.

Reviewed By: shergin

Differential Revision: D6429271

fbshipit-source-id: adf858cb67ba221c70d6d6f1bd6cff505e90c365
---
 Libraries/Components/WebView/WebView.ios.js | 28 +++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js
index f158addaa..329dd2027 100644
--- a/Libraries/Components/WebView/WebView.ios.js
+++ b/Libraries/Components/WebView/WebView.ios.js
@@ -324,6 +324,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,
 
@@ -403,7 +405,6 @@ class WebView extends React.Component {
 
   static defaultProps = {
     originWhitelist: WebViewShared.defaultOriginWhitelist,
-    scalesPageToFit: true,
   };
 
   state = {
@@ -416,11 +417,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) {
@@ -523,7 +541,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
@@ -685,6 +703,12 @@ class WebView extends React.Component {
     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) {