Android - WebView renders incorrectly on large heights

Bug description:

When rendering a WebView that is too long, it shows a massive padding on top of rendered content. The height at which this happends depends on the device/emulator.

For example, on a Pixel XL emulator, WebView behaves as expected up until height: 4500. But once height is at around 5000 , it breaks.

To Reproduce:

import React from "react";
import { WebView } from "react-native-webview";
import { View } from "react-native";

  const webViewContent = {
    borderBottomColor: colors.paleGray,
    borderBottomWidth: 1,
    flex: 1,
    flexDirection: "row",
    opacity: 0.99,
    paddingHorizontal: 0,
    paddingVertical: 20,
    margin: 0,
    height: 5000,  //4500 works
    width: "100%"
  },

  const html = "This is a test".repeat(100)

  export default Content = () => {
    return (
        <WebView
          style={webViewContent}
          source={ { html }}
        />
    )
  };

Expected behavior:

Webview renders HTML string filling the whole screen.

Screenshots/Videos:

Height set to 4500

Height set to 5000

Environment:

• OS: Android
• OS version: 9
• react-native version: 0.63.2
• react-native-webview version: 11.13.0

[arielflashner]

i had the same issue while using “androidHardwareAccelerationDisabled={true}” removing that fixed the issue

[r-kojima]

@kirhammer
I got same problem when tried to render too long HTML. But adding additional props androidLayerType="hardware" works correctly for me.