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

See original GitHub issue

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

2018-10-25 11 58 34

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

69reactions
Titozzzcommented, Oct 25, 2018

Try adding overflow: ‘hidden’ to your view with 150 150 please

6reactions
MrSeaWavecommented, Oct 26, 2018

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>

2018-10-26 11 16 14

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to resolve the white Screen of WebView? - Stack Overflow
I could fix it by overrinding WebViewClient class, just implement onPageFinished() doing a validation whereas the loading progress of the ...
Read more >
How I fixed a blank page issue in Android Webview component
I noticed that I opened that page from a link and that it has been loaded on a webview component instead of the...
Read more >
White blank screen when load website in a webview #1426
I am having the same issue but on Windows with Android. OS: Windows 10. OS version: 10.0.18363 react-native version: 0.62.2 react-native-webview ...
Read more >
Blank screen in webview - Questions - Framework7 Forum
hello all, i want to use f7 for my app in android version. its perfect in the local browser but when i move...
Read more >
App staying on white screen after splash screen - Ionic Forum
I have tried to disable and enable “Android System WebView” as mentioned in some forum on Android webview issues but it did not...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found