feat(android): Add androidLayerType as prop (react-native-webview#1588)

* Add androidLayerType as a prop

* Deprecate "androidHardwareAccelerationDisabled" prop

* Update reference

Co-authored-by: Olivia Caraiman <olcaraim@microsoft.com>

Author: oliviacaraiman

android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java

@@ -299,6 +299,21 @@ public void setHardwareAccelerationDisabled(WebView view, boolean disabled) {
     }
   }
 
+  @ReactProp(name = "androidLayerType")
+  public void setLayerType(WebView view, String layerTypeString) {
+    int layerType = View.LAYER_TYPE_NONE;
+    switch (layerTypeString) {
+        case "hardware":
+          layerType = View.LAYER_TYPE_HARDWARE;
+          break;
+        case "software":
+          layerType = View.LAYER_TYPE_SOFTWARE;
+          break;
+    }
+    view.setLayerType(layerType, null);
+  }
+
+
   @ReactProp(name = "overScrollMode")
   public void setOverScrollMode(WebView view, String overScrollModeString) {
     Integer overScrollMode;

docs/Reference.md

@@ -35,6 +35,7 @@ This document lays out the current public properties and methods for the React N
 - [`javaScriptEnabled`](Reference.md#javascriptenabled)
 - [`javaScriptCanOpenWindowsAutomatically`](Reference.md#javascriptcanopenwindowsautomatically)
 - [`androidHardwareAccelerationDisabled`](Reference.md#androidHardwareAccelerationDisabled)
+- [`androidLayerType`](Reference.md#androidLayerType)
 - [`mixedContentMode`](Reference.md#mixedcontentmode)
 - [`thirdPartyCookiesEnabled`](Reference.md#thirdpartycookiesenabled)
 - [`userAgent`](Reference.md#useragent)
@@ -781,14 +782,32 @@ A Boolean value indicating whether JavaScript can open windows without user inte
 
 ### `androidHardwareAccelerationDisabled`[⬆](#props-index)<!-- Link generated with jump2header -->
 
-Boolean value to disable Hardware Acceleration in the `WebView`. Used on Android only as Hardware Acceleration is a feature only for Android. The default value is `false`.
+**Deprecated.** Use the `androidLayerType` prop instead. 
 
 | Type | Required | Platform |
 | ---- | -------- | -------- |
 | bool | No       | Android  |
 
 ---
 
+### `androidLayerType`[⬆](#props-index)<!-- Link generated with jump2header -->
+
+Specifies the layer type. 
+
+Possible values for `androidLayerType` are:
+
+- `none` (default) - The view does not have a layer.
+- `software` - The view has a software layer. A software layer is backed by a bitmap and causes the view to be rendered using Android's software rendering pipeline, even if hardware acceleration is enabled.
+- `hardware` - The view has a hardware layer. A hardware layer is backed by a hardware specific texture and causes the view to be rendered using Android's hardware rendering pipeline, but only if hardware acceleration is turned on for the view hierarchy.
+
+Avoid setting both `androidLayerType` and `androidHardwareAccelerationDisabled` props at the same time, as this may cause undefined behaviour.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| string | No       | Android  |
+
+---
+
 ### `mixedContentMode`[⬆](#props-index)<!-- Link generated with jump2header -->
 
 Specifies the mixed content mode. i.e WebView will allow a secure origin to load content from any other origin.

src/WebView.android.tsx

@@ -61,6 +61,7 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
     saveFormDataDisabled: false,
     cacheEnabled: true,
     androidHardwareAccelerationDisabled: false,
+    androidLayerType: 'none',
     originWhitelist: defaultOriginWhitelist,
   };
 

src/WebViewTypes.ts

@@ -182,6 +182,8 @@ export type OverScrollModeType = 'always' | 'content' | 'never';
 
 export type CacheMode = 'LOAD_DEFAULT' | 'LOAD_CACHE_ONLY' | 'LOAD_CACHE_ELSE_NETWORK' | 'LOAD_NO_CACHE';
 
+export type AndroidLayerType = 'none' | 'software' | 'hardware';
+
 export interface WebViewSourceUri {
   /**
    * The URI to load in the `WebView`. Can be a local or remote file.
@@ -284,6 +286,7 @@ export interface AndroidNativeWebViewProps extends CommonNativeWebViewProps {
   allowFileAccessFromFileURLs?: boolean;
   allowUniversalAccessFromFileURLs?: boolean;
   androidHardwareAccelerationDisabled?: boolean;
+  androidLayerType?: AndroidLayerType;
   domStorageEnabled?: boolean;
   geolocationEnabled?: boolean;
   javaScriptEnabled?: boolean;
@@ -809,6 +812,18 @@ export interface AndroidWebViewProps extends WebViewSharedProps {
    */
   androidHardwareAccelerationDisabled?: boolean;
 
+    /**
+   * https://developer.android.com/reference/android/webkit/WebView#setLayerType(int,%20android.graphics.Paint)
+   * Sets the layerType. Possible values are:
+   *
+   * - `'none'` (default)
+   * - `'software'`
+   * - `'hardware'`
+   *
+   * @platform android
+   */
+  androidLayerType?: AndroidLayerType;
+
   /**
    * Boolean value to enable third party cookies in the `WebView`. Used on
    * Android Lollipop and above only as third party cookies are enabled by