status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
Libraries/Components/WebView/WebView.ios.js
View File

@ -324,6 +324,8 @@ class WebView extends React.Component {
* Boolean that controls whether the web content is scaled to fit * Boolean that controls whether the web content is scaled to fit
* the view and enables the user to change the scale. The default value * the view and enables the user to change the scale. The default value
* is `true`. * is `true`.
*
* On iOS, when `useWebKit=true`, this prop will not work.
*/ */
scalesPageToFit: PropTypes.bool, scalesPageToFit: PropTypes.bool,
@ -403,7 +405,6 @@ class WebView extends React.Component {
static defaultProps = { static defaultProps = {
originWhitelist: WebViewShared.defaultOriginWhitelist, originWhitelist: WebViewShared.defaultOriginWhitelist,
scalesPageToFit: true,
}; };
state = { state = {
@ -416,11 +417,28 @@ class WebView extends React.Component {
if (this.props.startInLoadingState) { if (this.props.startInLoadingState) {
this.setState({viewState: WebViewState.LOADING}); 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() { render() {
let otherView = null; let otherView = null;
let scalesPageToFit;
if (this.props.useWebKit) {
({scalesPageToFit} = this.props);
} else {
({scalesPageToFit = true} = this.props);
}
if (this.state.viewState === WebViewState.LOADING) { if (this.state.viewState === WebViewState.LOADING) {
otherView = (this.props.renderLoading || defaultRenderLoading)(); otherView = (this.props.renderLoading || defaultRenderLoading)();
} else if (this.state.viewState === WebViewState.ERROR) { } else if (this.state.viewState === WebViewState.ERROR) {
@ -523,7 +541,7 @@ class WebView extends React.Component {
messagingEnabled={messagingEnabled} messagingEnabled={messagingEnabled}
onMessage={this._onMessage} onMessage={this._onMessage}
onShouldStartLoadWithRequest={onShouldStartLoadWithRequest} onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
scalesPageToFit={this.props.scalesPageToFit} scalesPageToFit={scalesPageToFit}
allowsInlineMediaPlayback={this.props.allowsInlineMediaPlayback} allowsInlineMediaPlayback={this.props.allowsInlineMediaPlayback}
mediaPlaybackRequiresUserAction={ mediaPlaybackRequiresUserAction={
this.props.mediaPlaybackRequiresUserAction this.props.mediaPlaybackRequiresUserAction
@ -685,6 +703,12 @@ class WebView extends React.Component {
this._showRedboxOnPropChanges(prevProps, 'allowsInlineMediaPlayback'); this._showRedboxOnPropChanges(prevProps, 'allowsInlineMediaPlayback');
this._showRedboxOnPropChanges(prevProps, 'mediaPlaybackRequiresUserAction'); this._showRedboxOnPropChanges(prevProps, 'mediaPlaybackRequiresUserAction');
this._showRedboxOnPropChanges(prevProps, 'dataDetectorTypes'); this._showRedboxOnPropChanges(prevProps, 'dataDetectorTypes');
if (this.props.scalesPageToFit !== undefined) {
console.warn(
'The scalesPageToFit property is not supported when useWebKit = true',
);
}
} }
_showRedboxOnPropChanges(prevProps, propName: string) { _showRedboxOnPropChanges(prevProps, propName: string) {