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.