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?

By : NinetyHH


Answers

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

By : uRTLy


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.



If I am reading this correctly, Message would contain a List<MessageUser>.

If that's the case then this should get you close:

var List<Message> messages = 
    ( from m 
      in db.Messages 
      where 
          m.UserID == userid || m.MessageUsers.Any(mu => mu.UserID == userID) 
      select m).ToList();
By : Sam Axe


This video can help you solving your question :)
By: admin