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:
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/>
}
}
Here's my own possible solution added in the question, as for now, this is the only solution that works well.
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/>
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments