React-Native: Show loading screen before loading webview

Question

I have a moment when the SplashScreen component is installed, which I show first before my state. I would like to somehow find a way to show this component while my webview is loading. I added onLoadEnd to my webview and it looks like my message is returned after the download is complete, the problem is that if I download the splash screen first and wait for the onLoadEnd state to change, it will never actually change because the webview not yet installed rendered. Is there a good way to do this?

Answer 1

My solution was actually quite simple, the WebView component may have a renderLoading parameter that did not work for me, I realized that this is because you also need to define startInLoadingState.

So my webview looks something like this:

<WebView ref={MY_REF} source={source} renderLoading={this.renderLoading} startInLoadingState /> 

Answer 2

This will be my approach:

 constructor(props){ super(props); this.state = { webviewLoaded: false }; } _onLoadEnd() { this.setState({ webviewLoaded: true }); } render() { return( <View> {(this.state.webviewLoaded) ? null : <SplashScreen />} <WebView onLoadEnd={this._onLoadEnd.bind(this)} /> </View> ) } 

Thus, the webview is displayed, but it is placed behind SplashScreen . Thus, web browsing starts loading while SplashScreen is displayed.

Answer 3

I had a similar problem and managed to temporarily fix this problem:

 loadEnd () { this.setState({ webViewLoaded: true }): } render () { const { webViewLoaded } = this.state; return (<View> {!webViewLoaded && <LoadingComponent /> } -- or spinner, whatever <WebView style={(webViewLoaded) ? styles.webView : styles.loading} onLoadEnd={() => this.loadEnd.bind(this)} /> </View); } const styles = StyleSheet.create({ webView: { -- your styles ---}, loading: { width: 0, heigt: 0 } }); 

I'm not sure that this will help you, but you can try a similar approach. I will probably change this to something more convenient. Not sure if there is an opportunity to revive these changes, because Im is still pretty new to React Native.

edit: added hiding spinner / loading element