ghulamostafa/SplashScreen.js

## SplashScreen.js
import React, { Component } from 'react';
import {  View, Image } from 'react-native';
import { Container, Content, Footer, Body, Text } from 'native-base';
import { StackActions, NavigationActions } from 'react-navigation';

export default class extends Component {
    constructor(props){
        super(props);
        this.state = {
            timer: 5 //The duration you want it to stay in seconds
        }
        //This element will then be cleared out
        this._interval =  setInterval(() =>{
            this.timerCompleted(this.state.timer);
        }, 1000)
    }

    timerCompleted(countdown){
        if (countdown <= 1){
            clearInterval(this._interval);
            this.props.navigation.dispatch(this.resetAction);
        }
        else{
            this.setState({
                timer: countdown - 1
            })
        }
    }

    //This will close the splash screen until the user restarts the application. The back button will not lead to it anymore.
    resetAction = StackActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({routeName: 'LoginScreen'})]
    })

    componentDidMount(){

    }
    render() {
        return (
        <Container
            style={{
                    backgroundColor: '#FFFFFF'
                }}
                >
            <Content>
                <Body>
                <Image
                    source={require('../resources/animations/camel_oasis.gif')}
                    style={{
                            width: 400,
                            height: 300,
                            marginBottom: 30
                        }}
                    />
                </Body>
            </Content>
        </Container>
        );
    }
}
	import React, { Component } from 'react';
	import { View, Image } from 'react-native';
	import { Container, Content, Footer, Body, Text } from 'native-base';
	import { StackActions, NavigationActions } from 'react-navigation';

	export default class extends Component {
	constructor(props){
	super(props);
	this.state = {
	timer: 5 //The duration you want it to stay in seconds
	}
	//This element will then be cleared out
	this._interval = setInterval(() =>{
	this.timerCompleted(this.state.timer);
	}, 1000)
	}

	timerCompleted(countdown){
	if (countdown <= 1){
	clearInterval(this._interval);
	this.props.navigation.dispatch(this.resetAction);
	}
	else{
	this.setState({
	timer: countdown - 1
	})
	}
	}

	//This will close the splash screen until the user restarts the application. The back button will not lead to it anymore.
	resetAction = StackActions.reset({
	index: 0,
	actions: [NavigationActions.navigate({routeName: 'LoginScreen'})]
	})

	componentDidMount(){

	}
	render() {
	return (
	<Container
	style={{
	backgroundColor: '#FFFFFF'
	}}
	>
	<Content>
	<Body>
	<Image
	source={require('../resources/animations/camel_oasis.gif')}
	style={{
	width: 400,
	height: 300,
	marginBottom: 30
	}}
	/>
	</Body>
	</Content>
	</Container>
	);
	}
	}