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
This commit is contained in:
Ramanpreet Nara 2018-08-16 13:34:31 -07:00 committed by Facebook Github Bot
parent 95801f1eda
commit b18fddadfe
1 changed files with 26 additions and 2 deletions

View File

@ -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) {