Splash screen in Create-React-App

Question

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 & name must be provided in the manifest file.

Question: Is there any way to customize the Splash Screen instead of using the default one?

Following is the possible solution but searching for a better way to do that.

Possible Solution:

Add a component for Splash Screen.

On the main component, render SplashScreen component untill the API response is returned from the server. I am using renderSplashscreen state for rendering the SplashScreen component.

// Component for Splash Screen
class SplashScreen extends React.Component {
  render() {
    const style = {top: 0,
      bottom: 0,
      right: 0,
      left: 0,
      position: 'fixed'};

    return (
      <img src={'IMAGE-URL'} style={style}/>
    );
  }
}

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 <SplashScreen/>;
    else
      return <OtherComponent/>
  }
}

I believe that currently the PWA splash screens are controlled by the browser you are using. I have seen nothing that lets you build your own. They just use the values you supply. — Mathias, Jul 26 '18 at 13:19
@Mathias Thanks for the comment. So, the above *possible solution* seems to be the only workaround for now. — Radix, Jul 26 '18 at 14:07

score 1 · Accepted Answer · answered Jan 11 '19 at 09:01

Here's my own possible solution added in the question, as for now, this is the only solution that works well.

Add a component for Splash Screen.

On the main component, render SplashScreen component untill the API response is returned from the server. I am using renderSplashscreen state for rendering the SplashScreen component.

// Component for Splash Screen
class SplashScreen extends React.Component {
  render() {
    const style = {top: 0,
      bottom: 0,
      right: 0,
      left: 0,
      position: 'fixed'};

    return (
      <img src={'IMAGE-URL'} style={style}/>
    );
  }
}

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 <SplashScreen/>;
    else
      return <OtherComponent/>
  }
}

Splash screen in Create-React-App

1 Answers1

Linked