React-Native: Show loading screen till the webview is loaded

Question

I have at the moment a component SplashScreen which I'm rendering first till my state is set. I would like somehow to find a way how to still show this component while my webview is loaded. I added the onLoadEnd to my webview and looks like I get my message back when its finished loading, the problem is that if I load first the splashscreen and wait for the state to be changed onLoadEnd actually will never be changed because the webview is not yet rendered. Is there a good method how to do this?

Answer 1

My solution was actually quite simple, the WebView component can have the param renderLoading which for me was not working, I figured out it was because also startInLoadingState needed to be defined.

So my WebView looks somehow like this:

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

Answer 2

This would 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>
    )
}

This way, the webview is rendered but it is placed behind the SplashScreen. So the webview starts loading while the SplashScreen is being displayed.

Answer 3

I had a similar problem and I managed to solve it temporarily with this:

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
  }
});

not sure if exactly this helps you but you can try similar approach. I will probably change this to something more convenient. Not sure if there are possibilities to animate these changes because Im still pretty newbie in React Native.

edit: added hiding the spinner/loading element