Permalink
Browse files

Move WKWebView into WebView.ios.js

Summary:
@public

This diff adds the `useWebKit` property to the `<WebView/>` React Native component. On iOS, when this property is true, we use `RCTWKWebView`. Otherwise, we use `RCTWebView`. On Android, this property does nothing.

Reviewed By: shergin

Differential Revision: D6423374

fbshipit-source-id: 006bfaaf12984fac0174c0b5bb897c009c026cd0
  • Loading branch information...
RSNara authored and kelset committed Aug 16, 2018
1 parent 078799f commit f46dbc2a23f822204bf94cc735955cf9e1e6a5d7

This file was deleted.

Oops, something went wrong.
@@ -109,6 +109,12 @@ class WebView extends React.Component {
PropTypes.number,
]),
/**
* If true, use WKWebView instead of UIWebView.
* @platform ios
*/
useWebKit: PropTypes.bool,
/**
* Used on Android only, JS is enabled by default for WebView on iOS
* @platform android
@@ -32,6 +32,7 @@ const requireNativeComponent = require('requireNativeComponent');
const resolveAssetSource = require('resolveAssetSource');
const RCTWebViewManager = require('NativeModules').WebViewManager;
const RCTWKWebViewManager = require('NativeModules').WKWebViewManager;
const BGWASH = 'rgba(255,255,255,0.8)';
const RCT_WEBVIEW_REF = 'webview';
@@ -66,6 +67,9 @@ const DataDetectorTypes = [
'link',
'address',
'calendarEvent',
'trackingNumber',
'flightNumber',
'lookupSuggestion',
'none',
'all',
];
@@ -162,6 +166,12 @@ class WebView extends React.Component {
PropTypes.number,
]),
/**
* If true, use WKWebView instead of UIWebView.
* @platform ios
*/
useWebKit: PropTypes.bool,
/**
* Function that returns a view to show if there's an error.
*/
@@ -264,6 +274,11 @@ class WebView extends React.Component {
* - `'none'`
* - `'all'`
*
* With the new WebKit implementation, we have three new values:
* - `'trackingNumber'`,
* - `'flightNumber'`,
* - `'lookupSuggestion'`,
*
* @platform ios
*/
dataDetectorTypes: PropTypes.oneOfType([
@@ -433,7 +448,13 @@ class WebView extends React.Component {
const nativeConfig = this.props.nativeConfig || {};
const viewManager = nativeConfig.viewManager || RCTWebViewManager;
let viewManager = nativeConfig.viewManager;
if (this.props.useWebKit) {
viewManager = viewManager || RCTWKWebViewManager;
} else {
viewManager = viewManager || RCTWebViewManager;
}
const compiledWhitelist = [
'about:blank',
@@ -474,7 +495,13 @@ class WebView extends React.Component {
const messagingEnabled = typeof this.props.onMessage === 'function';
const NativeWebView = nativeConfig.component || RCTWebView;
let NativeWebView = nativeConfig.component;
if (this.props.useWebKit) {
NativeWebView = NativeWebView || RCTWKWebView;
} else {
NativeWebView = NativeWebView || RCTWebView;
}
const webView = (
<NativeWebView
@@ -514,13 +541,21 @@ class WebView extends React.Component {
);
}
_getCommands() {
if (!this.props.useWebKit) {
return UIManager.RCTWebView.Commands;
}
return UIManager.RCTWKWebView.Commands;
}
/**
* Go forward one page in the web view's history.
*/
goForward = () => {
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
UIManager.RCTWebView.Commands.goForward,
this._getCommands().goForward,
null,
);
};
@@ -531,7 +566,7 @@ class WebView extends React.Component {
goBack = () => {
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
UIManager.RCTWebView.Commands.goBack,
this._getCommands().goBack,
null,
);
};
@@ -543,7 +578,7 @@ class WebView extends React.Component {
this.setState({viewState: WebViewState.LOADING});
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
UIManager.RCTWebView.Commands.reload,
this._getCommands().reload,
null,
);
};
@@ -554,7 +589,7 @@ class WebView extends React.Component {
stopLoading = () => {
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
UIManager.RCTWebView.Commands.stopLoading,
this._getCommands().stopLoading,
null,
);
};
@@ -572,7 +607,7 @@ class WebView extends React.Component {
postMessage = data => {
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
UIManager.RCTWebView.Commands.postMessage,
this._getCommands().postMessage,
[String(data)],
);
};
@@ -586,7 +621,7 @@ class WebView extends React.Component {
injectJavaScript = data => {
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
UIManager.RCTWebView.Commands.injectJavaScript,
this._getCommands().injectJavaScript,
[data],
);
};
@@ -641,9 +676,36 @@ class WebView extends React.Component {
const {onMessage} = this.props;
onMessage && onMessage(event);
};
componentDidUpdate(prevProps) {
if (!(prevProps.useWebKit && this.props.useWebKit)) {
return;
}
this._showRedboxOnPropChanges(prevProps, 'allowsInlineMediaPlayback');
this._showRedboxOnPropChanges(prevProps, 'mediaPlaybackRequiresUserAction');
this._showRedboxOnPropChanges(prevProps, 'dataDetectorTypes');
}
_showRedboxOnPropChanges(prevProps, propName: string) {
if (this.props[propName] !== prevProps[propName]) {
console.error(
`Changes to property ${propName} do nothing after the initial render.`,
);
}
}
}
const RCTWebView = requireNativeComponent('RCTWebView');
const RCTWebView = requireNativeComponent(
'RCTWebView',
WebView,
WebView.extraNativeComponentConfig,
);
const RCTWKWebView = requireNativeComponent(
'RCTWKWebView',
WebView,
WebView.extraNativeComponentConfig,
);
const styles = StyleSheet.create({
container: {

0 comments on commit f46dbc2

Please sign in to comment.