How to build Splash Screens in React

Question

I am building this website and have hosted it on the heroku free tier therefore takes a minute there before starting up.I feel this is rather slow and would probably be wise if i had something like a splash screen like you would see when you go to the twitter or instagram websites where it displays a logo first instead of just a blank screen before the website loads up.

Would anybody know how to do this in React? Please provide me the code on how to achieve this.

Answer 1

go ahead and first

npm install react-native-splash-screen --save
npm install react react-native

 import { Platform, StyleSheet, View, Text,  
 Image, TouchableOpacity, Alert } from 'react-native';  
 export default class Myapp extends Component<{}>  
{  
   constructor(){  
     super();  
     this.state={  
     isVisible : true,  
    }  
  }  
   Hide_Splash_Screen=()=>{  
    this.setState({   
      isVisible : false   
    });  
  }  
   
  componentDidMount(){  
    var that = this;  
    setTimeout(function(){  
      that.Hide_Splash_Screen();  
    }, 5000);  
   }  
   
    render()  
    {  
        let Splash_Screen = (  
             <View style={styles.SplashScreen_RootView}>  
                 <View style={styles.SplashScreen_ChildView}>  
                       <Image source={{uri:'https://static.javatpoint.com/tutorial/react-native/images/react-native-tutorial.png'}}  
                    style={{width:'100%', height: '100%', resizeMode: 'contain'}} />  
                </View>  
             </View> )  
         return(  
             <View style = { styles.MainContainer }>  
                <Text style={{textAlign: 'center'}}> Splash Screen Example</Text>  
                 {  
                  (this.state.isVisible === true) ? Splash_Screen : null  
                }  
            </View>  
              );  
    }  
}  
 const styles = StyleSheet.create(  
{  
    MainContainer:  
    {  
        flex: 1,  
        justifyContent: 'center',  
        alignItems: 'center',  
        paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0  
    },  
   
    SplashScreen_RootView:  
    {  
        justifyContent: 'center',  
        flex:1,  
        margin: 10,  
        position: 'absolute',  
        width: '100%',  
        height: '100%',  
      },  
   
    SplashScreen_ChildView:  
    {  
        justifyContent: 'center',  
        alignItems: 'center',  
        backgroundColor: '#00BCD4',  
        flex:1,  
    },  
});```

I hope this works out

Answer 2

The problem here is not that the react app takes time to load, but the free heroku dyno itself goes offline if it idle for a certain while.

You can make use of some hacks like https://www.pingdom.com/ , where you need to make a request to your app every x interval to avoid it from going to sleep.

Note: This will impact your free dyno hours.

Answer 3

I think the easiest and, maybe, best way would be to do this through the React Context API .Here is a Codesandbox example of how it can be done using the React Context API .

Answer 4

So first what your talking about is preloader, not splash screens,

splash screens are used for mobile applications, while preloader, or loading screens are used for web applications

I could drop some codes on how to achieve that