Android is crashing when "WebView" is wrapped by "View"

Bug description: I have an autosized webview that works perfectly on ios:

import React, { useState } from "react";
import { View } from "react-native";
import { WebView } from "react-native-webview";
import PropTypes from "prop-types";

const BODY_TAG_PATTERN = /<\/ *body>/;

const code = `
    <style>
        body, html {
            margin: 0;
            padding: 0;
        }
    </style>

    <script>
        window.ReactNativeWebView.postMessage(document.body.scrollHeight, '*');
    </script>
`;

const injectCode = (html) => {
    return html.replace(BODY_TAG_PATTERN, `${code}</body>`);
};

const WebViewAutoHeight = ({ html, style }) => {
    const [contentHeight, setContentHeight] = useState(1);

    const adjustHeight = (event) => {
        setContentHeight(parseInt(event.nativeEvent.data));
    };

    if (!html) {
        throw new Error("At this moment, WebViewAutoHeight only supports html files");
    }

    if (!BODY_TAG_PATTERN.test(html)) {
        throw new Error(`Cannot find </body> from: ${html}`);
    }

    return (
        <View style={[style, { height: contentHeight }]}>
            <WebView
                source={{ html: injectCode(html) }}
                onMessage={adjustHeight}
            />
        </View>
    );
};

WebViewAutoHeight.propTypes = {
    html: PropTypes.string.isRequired,
    style: PropTypes.any
};

WebViewAutoHeight.defaultProps = {
    style: null
};

export default WebViewAutoHeight;

However, when I try to use it on android, the app crashes without a message. Then I decided to remove everything and replaced the render method with the following:

<View>
   <WebView
        source={{ uri: 'https://infinite.red' }}
        style={{ marginTop: 20 }}
   />
</View>

but it was still crashing. Then I removed the outer view element and it worked!

Expected behavior: The android app should not crash

Environment:

• OS: macOS Mojave
• OS version: 10.14.5
• react-native version: 0.59.8
• react-native-webview version: 6.9.0

[jonsaich]

Just spent far too long working on a solution for this. I didn’t get any of the above solutions to work, however setting androidHardwareAccelerationDisabled={true} on the WebView did work.

[CodingBitsDev]

@Rendfold I managed to come across this link in my research: https://www.gitmemory.com/issue/react-native-community/react-native-webview/430/493976111

Apperently this bug can be fixed by changing the Opacity of the webviwe to 0.99 instead of the default value of 1. Setting the overflow value to “hidden” prevents that the background will be visible.

This worked for me as a fix Altho the androud crash did only appeare when I pressed the back button and by this dismissed the screen. I am also using react navigation which probably played a role as well.