React native - Change screen after x seconds
Not Using any navigator this can solve your problem
import Defis from './components/defis'
import Quote from './components/quote'
export default class Betty extends Component {
constructor(props){
super(props)
this.state = {
component : <Quote />
}
}
componentDidMount(){
// Start counting when the page is loaded
this.timeoutHandle = setTimeout(()=>{
// Add your logic for the transition
this.setState({ component: <Defis /> })
}, 5000);
}
componentWillUnmount(){
clearTimeout(this.timeoutHandle);
}
render() {
return (
this.state.component
);
I have done this to show login screen after the splash screen in react-native as follows:
import Login from './Login'; // My next screen
....
....
const {navigate} = this.props.navigation;
setTimeout(() => {
navigate('Login'); //this.props.navigation.navigate('Login')
}, 5000); //5000 milliseconds
I have used react-navigation for the navigation purpose.
I was doing almost the same thing with "react-native-router-flux". Simply render a first screen, in your case the "Quote", and then set in componentDidMount:
setTimeout(() => {
Actions.yourNextSceneName()
}, milliseconds)
Hope this helps.