diff --git a/Libraries/Components/WebView/WebView.android.js b/Libraries/Components/WebView/WebView.android.js index 83991432b57..d47a6d6c695 100644 --- a/Libraries/Components/WebView/WebView.android.js +++ b/Libraries/Components/WebView/WebView.android.js @@ -115,6 +115,16 @@ class WebView extends React.Component { */ useWebKit: PropTypes.bool, + /** + * Used on Android only to disable Hardware Acceleration if needed + * Hardware acceleration can not be enabled at view level but it can be + * disabled see: + * https://developer.android.com/guide/topics/graphics/hardware-accel + * + * @platform android + */ + hardwareAccelerationEnabledExperimental: PropTypes.bool, + /** * Used on Android only, JS is enabled by default for WebView on iOS * @platform android @@ -248,6 +258,7 @@ class WebView extends React.Component { javaScriptEnabled: true, thirdPartyCookiesEnabled: true, scalesPageToFit: true, + hardwareAccelerationEnabledExperimental: true, saveFormDataDisabled: false, originWhitelist: WebViewShared.defaultOriginWhitelist, }; @@ -327,6 +338,9 @@ class WebView extends React.Component { injectedJavaScript={this.props.injectedJavaScript} userAgent={this.props.userAgent} javaScriptEnabled={this.props.javaScriptEnabled} + hardwareAccelerationEnabledExperimental={ + this.props.hardwareAccelerationEnabledExperimental + } thirdPartyCookiesEnabled={this.props.thirdPartyCookiesEnabled} domStorageEnabled={this.props.domStorageEnabled} messagingEnabled={typeof this.props.onMessage === 'function'} diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js index c63847e26e4..cb6c8b0a08c 100644 --- a/Libraries/Components/WebView/WebView.ios.js +++ b/Libraries/Components/WebView/WebView.ios.js @@ -285,6 +285,16 @@ class WebView extends React.Component { PropTypes.arrayOf(PropTypes.oneOf(DataDetectorTypes)), ]), + /** + * Used on Android only to disable Hardware Acceleration if needed + * Hardware acceleration can not be enabled at view level but it can be + * disabled see: + * https://developer.android.com/guide/topics/graphics/hardware-accel + * + * @platform android + */ + hardwareAccelerationEnabledExperimental: PropTypes.bool, + /** * Boolean value to enable JavaScript in the `WebView`. Used on Android only * as JavaScript is enabled by default on iOS. The default value is `true`. diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java index 677831ffe82..6fbfe3a9e49 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java @@ -16,6 +16,7 @@ import android.graphics.Picture; import android.net.Uri; import android.os.Build; import android.text.TextUtils; +import android.view.View; import android.view.ViewGroup.LayoutParams; import android.webkit.ConsoleMessage; import android.webkit.CookieManager; @@ -83,6 +84,7 @@ import org.json.JSONObject; * - canGoBack - boolean, whether there is anything on a history stack to go back * - canGoForward - boolean, whether it is possible to request GO_FORWARD command */ +@TargetApi(Build.VERSION_CODES.HONEYCOMB) @ReactModule(name = ReactWebViewManager.REACT_CLASS) public class ReactWebViewManager extends SimpleViewManager { @@ -437,10 +439,22 @@ public class ReactWebViewManager extends SimpleViewManager { if (ReactBuildConfig.DEBUG && Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); } - return webView; } + @ReactProp(name = "hardwareAccelerationEnabledExperimental", defaultBoolean = true) + public void sethardwareAccelerationEnabledExperimental(WebView view, boolean enabled) { + // Hardware acceleration can not be enabled at view level but it can be disabled + // see: https://developer.android.com/guide/topics/graphics/hardware-accel + // + // Disabling hardware acceleration is sometimes required to workaround chromium bugs: + // https://bugs.chromium.org/p/chromium/issues/detail?id=501901 + // + if (!enabled) { + view.setLayerType(View.LAYER_TYPE_SOFTWARE, null); + } + } + @ReactProp(name = "javaScriptEnabled") public void setJavaScriptEnabled(WebView view, boolean enabled) { view.getSettings().setJavaScriptEnabled(enabled);