Last active
July 3, 2018 19:58
-
-
Save ghulamostafa/7396f106ceb93b8cbbb7a75ba5295728 to your computer and use it in GitHub Desktop.
Creating a splash screen in React Native using ReactNavigation only.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment