[Android] White blank screen when load file in a webview
See original GitHub issue- 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
Issue Analytics
- State:
- Created 5 years ago
- Comments:8 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Try adding overflow: ‘hidden’ to your view with 150 150 please
oh,yeah,It runs successfully, thanks so much @Titozzz