From b18fddadfeae5512690a0a059a4fa80c864f43a3 Mon Sep 17 00:00:00 2001 From: Ramanpreet Nara 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 `` 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 ``. 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) {