Skip to content

Commit

Permalink
Warn when 'scalesPageToFit' prop is used
Browse files Browse the repository at this point in the history
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
  • Loading branch information
RSNara authored and facebook-github-bot committed Aug 16, 2018
1 parent 95801f1 commit b18fdda
Showing 1 changed file with 26 additions and 2 deletions.
28 changes: 26 additions & 2 deletions Libraries/Components/WebView/WebView.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,

Expand Down Expand Up @@ -403,7 +405,6 @@ class WebView extends React.Component {

static defaultProps = {
originWhitelist: WebViewShared.defaultOriginWhitelist,
scalesPageToFit: true,
};

state = {
Expand All @@ -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) {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit b18fdda

Please sign in to comment.