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.

score 9 · Accepted Answer · answered Jul 06 '17 at 08:58

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

Rohit Luthra · Answer 2 · 2017-07-07T05:23:24.563

9

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.

edited Jul 07 '17 at 05:23

answered Jul 06 '17 at 09:07

Rohit Luthra

1,256
17
27

score 3 · Answer 3 · answered Jul 06 '17 at 07:46

3

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.

answered Jul 06 '17 at 07:46

bra.Scene

628
8
14

score 0 · Answer 4 · answered Apr 17 '19 at 04:45

0

This worked for me:

import { NavigationActions } from "react-navigation";

componentDidMount(){
    setTimeOut( () => {
        NavigationActions.navigate('login');
    }, 5000 );
}

answered Apr 17 '19 at 04:45

Diego Santa Cruz Mendezú

4,325
39
27

score 0 · Answer 5 · answered Aug 12 '19 at 04:24

0

You can do it with using navigator by returning a View with the onLayout prop and adding the setTimeout function to the prop.

answered Aug 12 '19 at 04:24

Roberto Gonzales

11

Welcome to SO. Your answer is more of a comment. A good answer includes code, documentation links, and explanation. – Harshal Parekh Aug 12 '19 at 04:33

score 0 · Answer 6 · answered Mar 19 '22 at 04:09

How to navigate to another screen after timeout in React Native:

So I have created my navigation structure and the respective pages already.

Using functional component in ReactNative, do this this to the componentthat you want navigate from:

function MyPresentScreen( {navigation}, props ){
      setTimeout(() => {
       navigation.navigate('MyTargetScreen');
     }, 2500);
      return(
        <Text>My Present Screen that I will navigate from after some seconds</>
      )
    };

Note that you can customize the timeout as you wish. The above is 2 and half seconds. Credit: Even though it was written with class component, this article was helpful in helping me figure this out:

score 0 · Answer 7 · answered May 03 '23 at 08:58

Since most of the answers use legacy react-native code, adding one with functional react. I would display image (logo) for 3 seconds and then move to home screen (without back button), as:

export default function App() {

  const [flag, setFlag] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setFlag(true)
    }, 3000)
  },[]);

  return (
    <NavigationContainer>
      <View style={styles.container}>
        {!flag ? <Image source={require('./assets/images/Logo.png')} /> : <Dashboard />}
      </View>
    </NavigationContainer>
  );
}

React native - Change screen after x seconds

7 Answers7

Linked