React native - Change screen after x seconds

Question

I have a problem that I haven't been able to solve.

In my React native application, I would like to display a welcome screen at the start. Then 5 seconds later just close it, and display another one. Both are 2 entirely different screens, no need to keep the "come back" arrow.

I have been searching for hours, but I haven't found out how to do it.

Here is my code for now:

import Defis from './components/defis' 
import Quote from './components/quote'

export default class Betty extends Component {
    componentDidMount(){
        // Start counting when the page is loaded
        this.timeoutHandle = setTimeout(()=>{
            // Add your logic for the transition
            this.props.navigation.navigate('Defis') // what to push here?
        }, 5000);
    }

    componentWillUnmount(){
        clearTimeout(this.timeoutHandle); 
    }

    render() {
        return (
            <Quote/>
        );
    }
}

Does anybody know how to do it?

I'm not able to use Navigator.push, moreover Navigator seems deprecated.

Answer 1

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
);