[Android] White blank screen when load file in a webview

[MrSeaWave]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

react-native info

React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
      Memory: 30.62 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.12.0 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        Build Tools: 26.0.3, 27.0.3, 28.0.3
        API Levels: 26, 27, 28
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.0/10A255 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728 
      react-native: 0.57.3 => 0.57.3 
    npmGlobalPackages:
      react-native-cli: 2.0.1

my package.json

{
  "name": "TemReactNative",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.0-alpha.8af6728",
    "react-native": "0.57.3"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.48.1",
    "react-test-renderer": "16.6.0-alpha.8af6728"
  },
  "jest": {
    "preset": "react-native"
  }
}

Description

「Android」White blank screen when load file in a webview

Reproducible Demo

you can repeat it with the code

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

&& my code

import React, { Component } from 'react'
import { View, Text, TouchableOpacity, WebView } from 'react-native'

class TestWebView extends Component {
  constructor(props) {
    super(props)
    this.state = { visible: false }
  }
  onChange = () => {
    this.setState(preState => ({ visible: !preState.visible }))
  }

  render() {
    const { visible } = this.state
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#CCCCFF'
        }}
      >
        <TouchableOpacity
          style={{ backgroundColor: '#E3C07B', height: 50, width: 100 }}
          onPress={this.onChange}
        >
          <Text>Show WebView</Text>
        </TouchableOpacity>
        {visible ? (
          <View style={{ height: 150, width: 150 }}>
            <WebView
              source={{ uri: 'https://github.com/facebook/react-native' }}
              scalesPageToFit={true}
            />
          </View>
        ) : null}
      </View>
    )
  }
}

export default TestWebView

[Titozzz]

Try adding overflow: 'hidden' to your view with 150 150 please

[MrSeaWave]

oh，yeah,It runs successfully, thanks so much @Titozzz

<View style={{ height: 150, width: 150,overflow:'hidden' }}>
            <WebView
              source={{ uri: 'https://github.com/facebook/react-native' }}
              scalesPageToFit={true}
            />
</View>

[mtheus]

It's related? #21789

[dulmandakh]

Please use https://github.com/react-native-community/react-native-webview and file a bug there if you have issues. Thank you

[nppull]

thanks.. fixed for me <3

[KirillTarasenko]

Try adding overflow: 'hidden' to your view with 150 150 please

you are best!)

[vegin]

thanks so much @Titozzz

[shuqiong2015]

why overflow: 'hidden' can works？