Empty view above loading content

Bug description: After upgrading RN version to 59.9 we switched from the RN web views to this community package, and all web views within both iOS and android app have a view appearing above the loading screen briefly that is completely white, this view can be flexed smaller (try changing the flex: 1 to flex: 10 in below code).

To Reproduce: Create a fresh react-native init project,

packages.json

{
  "name": "WebViewTester",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.9",
    "react-native-webview": "^5.6.0"
  },
  "devDependencies": {
    "@babel/core": "7.4.5",
    "@babel/runtime": "7.4.5",
    "babel-jest": "24.8.0",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.54.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

App.js

import React, { Component } from "react";
import { Text, View } from "react-native";
import WebView from "react-native-webview";
export default class App extends Component {
    render() {
        return (
            <WebView
                source={{
                    uri: "https://www.facebook.com"
                }}
                startInLoadingState={true}
                bounces={false}
                renderLoading={() => {
                    return (
                        <View
                            style={{
                                flex: 1,
                                backgroundColor: "#00ff00",
                                justifyContent: "center",
                                alignContent: "center"
                            }}
                        >
                            <Text style={{}}>Loading...</Text>
                        </View>
                    );
                }}
            />
        );
    }
}

npm install and react-native link the project

Expected behavior: Navigate to facebook.com with a green loading screen filling entire screen with flex

Screenshots/Videos:

Environment:

• OS: macOS Mojave
• OS version: 10.14.5
• react-native version: 59.9
• react-native-webview version: 5.12.0

[filippoitaliano]

The component used in renderLoading is designed to be positioned is absolute way. This is the style used in the default loading view: https://github.com/react-native-community/react-native-webview/blob/master/src/WebView.styles.ts#L17.

[dapicester]

I just bumped into this, and fixed by adding the same style as styles.loadingOrErrorView to the loading component container, in particular:

position: 'absolute',
height: '100%',
width: '100%',