React Native Change Page after 5 seconds

Question

I'm newbie in react native and I don't know how to change page after 5 seconds.

I create an android.index.js file that will navigate to LandingPage.js. What I want to do is, when the LandingPage being loaded, it will wait for 5 seconds and then redirect / navigate to another page.

index.android.js

export default class DefaultProject extends Component {
 render() {
    return (
      <Navigator
        renderScene={(route, navigator) =>
          <LandingPage/>
        }
      />
  )

LandingPage.js

export default class LandingPage extends Component {
  render() {
    return (
        <Image source={require('./images/event3.jpeg')} 
        style={styles.container} />
        //How to redirect to another page from here after 5 secs?

    );
  }
}

Answer 1

You can use a simple setTimeout, as you would in a standard JS setup:

export default class LandingPage extends Component {
    componentDidMount(){
         // Start counting when the page is loaded
         this.timeoutHandle = setTimeout(()=>{
              // Add your logic for the transition
         }, 5000);
    }

    componentWillUnmount(){
         clearTimeout(this.timeoutHandle); // This is just necessary in the case that the screen is closed before the timeout fires, otherwise it would cause a memory leak that would trigger the transition regardless, breaking the user experience.
    }

    render() {

    return (
        <Image source={require('./images/event3.jpeg')} 
        style={styles.container} />
        //How to redirect to another page from here after 5 secs?

    );
  }


}