title: Splash screen in Create-React-App
body: <p>I'm using create-react-app to design a PWA. The default Splash screen provided by the App is an icon (in middle of the screen) and a name of the app below that icon. Icon &amp; name must be provided in the manifest file.</p>
  
  <p><strong>Question:</strong> Is there any way to customize the Splash Screen instead of using the default one?</p>
  
  <p>Following is the possible solution but searching for a better way to do that.</p>
  
  <p><strong>Possible Solution:</strong></p>
  
  <ol>
  <li>Add a component for Splash Screen.</li>
  <li><p>On the main component, render SplashScreen component untill the API response is returned from the server. I am using <code>renderSplashscreen</code> state for rendering the <code>SplashScreen</code> component.</p>
  
  <pre><code>// Component for Splash Screen
  class SplashScreen extends React.Component {
    render() {
      const style = {top: 0,
        bottom: 0,
        right: 0,
        left: 0,
        position: 'fixed'};
  
      return (
        &lt;img src={'IMAGE-URL'} style={style}/&gt;
      );
    }
  }
  
  class MainComponent extends React.Component {
    constructor(props) {
      this.state = {
        renderSplashscreen: true
      };
    }
  
    apiCallback(data) {
      // After getting the API response from server
      this.setState({renderSplashscreen: false});
    }
  
    render() {
      let view;
  
      if(this.state.renderSplashscreen)
        return &lt;SplashScreen/&gt;;
      else
        return &lt;OtherComponent/&gt;
    }
  }
  </code></pre></li>
  </ol>