Show splash screen before show main screen in react native without using 3rd party library

Question

I am beginner in react native so may be my question seems silly to all experts.

but I am struggling with a basic feature that i want to implement that i want to start my app with splash screen and after few seconds i want to show login screen or main screen.

I checked some example but did not found any example with full code so don't know how to use those code snippets in my app.

I've tried to apply some code as per documentation but my code is giving error, please have a look and help me.

Below is my code:

Index.android.js

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */

    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      Navigator
    } from 'react-native';
    import Splash from './Splash';
    import Login from './Login';

    export default class DigitalReceipt extends Component {
      render() {
        return (
           {
            if (route.sceneConfig) {
              return route.sceneConfig;
            }
            return Navigator.SceneConfigs.FloatFromRight;
          }} />
        );
      }
      renderScene(route, navigator) {
        var routeId = route.id;
        if (routeId === 'Splash') {
          return (
            
          );
        }
        if (routeId === 'Login') {
          return (
            
          );
        }
        return this.noRoute(navigator);

      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });

    AppRegistry.registerComponent('DigitalReceipt', () => DigitalReceipt);

Splash.js

    import React, { Component } from 'react';
    import { 
        AppRegistry,
        View,
        Text,
        StyleSheet,
        Image
    } from 'react-native';
    import { StackNavigator } from 'react-navigation';
    import Login from './Login';

    class Splash extends Component{
        componentWillMount() {
            var navigator = this.props.navigator;
            setTimeout(() => {
                navigate('Login')
            }, 1000);
          }

        render(){
            const { navigate } = this.props.navigation;
            return (
                
                     
                         
                        Digital Receipt  
                    
                    
                        Powered by React Native  
                     
                
            );
        }
    }
    const SplashApp = StackNavigator({
        Login: { screen: Login },
        Splash: { screen: Splash },
      });

    const styles = StyleSheet.create({
        wrapper: {
            backgroundColor: '#FFFFFF',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },
        title: {
            color: '#2ea9d3',
            fontSize: 32,
            fontWeight: 'bold'
        },
        subtitle:{
            color: '#2ea9d3',
            fontWeight: '200',
            paddingBottom: 20
        },
        titleWrapper:{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },

        logo:{
            width: 96,
            height: 96
        }
    });

    AppRegistry.registerComponent('SplashApp', () => SplashApp);

Login.js

    import React, { Component } from 'react';
    import { 
        AppRegistry,
        View,
        Text,
        StyleSheet,
        Image
    } from 'react-native';
    import { StackNavigator } from 'react-navigation';
    import Splash from './Splash';

    class Login extends Component{
        static navigationOptions = {
            title: 'Welcome',
          };
        render(){
            const { navigate } = this.props.navigation;
            return (
                
                    
                        Login Screen  
                     
                
            );
        }

    }
    const LoginApp = StackNavigator({
        Login: { screen: Login },
        Splash: { screen: Splash },
      });
    const styles = StyleSheet.create({
        wrapper: {
            backgroundColor: '#FFFFFF',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },
        title: {
            color: '#2ea9d3',
            fontSize: 32,
            fontWeight: 'bold'
        }
    });
    AppRegistry.registerComponent('LoginApp', () => LoginApp);

Please help me, sorry for the silly mistakes in code if you find any.

Thanks

Answer 1

You may try this example.There is no need stacknavigator in splash screen.

constructor(props){
    super(props);
    this.state = {
        timePassed: false,
    };
}

componentDidMount() {
    setTimeout( () => {
        this.setTimePassed();
    },1000);
}

setTimePassed() {
    this.setState({timePassed: true});
}

render() {
    if (!this.state.timePassed) {
        return <SplashScreen/>;
    } else {
        return <Login/>;
    }
}