setTimeout in React Native

Question

I'm trying to load a splash screen for an iOS app built in React Native. I'm trying to accomplish this through class states and then a setTimeout function as follows:

class CowtanApp extends Component {   constructor(props){     super(props);     this.state = {       timePassed: false     };   }    render() {     setTimeout(function(){this.setState({timePassed: true})}, 1000);     if (!this.state.timePassed){       return <LoadingPage/>;     }else{       return (         <NavigatorIOS           style = {styles.container}           initialRoute = {{             component: LoginPage,             title: 'Sign In',           }}/>       );     }   } } 

The loading page works for a second, and then I guess when setTimeout tries to change the state to true, my program crashes: 'undefined is not an object (evaluating this.setState)'. I've been going at this for a couple of hours, any ideas on how to fix it?

Answer 1

Classic javascript mistake.

setTimeout(function(){this.setState({timePassed: true})}, 1000) 

When setTimeout runs this.setState, this is no longer CowtanApp, but window. If you define the function with the => notation, es6 will auto-bind this.

setTimeout(() => {this.setState({timePassed: true})}, 1000) 

Alternatively, you could use a let that = this; at the top of your render, then switch your references to use the local variable.

render() {   let that = this;   setTimeout(function(){that.setState({timePassed: true})}, 1000); 

If not working, use bind.

setTimeout(   function() {       this.setState({timePassed: true});   }   .bind(this),   1000 ); 

Answer 2

Write a new function for settimeout. Pls try this.

class CowtanApp extends Component {   constructor(props){   super(props);   this.state = {   timePassed: false   }; }  componentDidMount() {   this.setTimeout( () => {      this.setTimePassed();   },1000); }  setTimePassed() {    this.setState({timePassed: true}); }   render() {  if (!this.state.timePassed){   return <LoadingPage/>; }else{   return (     <NavigatorIOS       style = {styles.container}       initialRoute = {{         component: LoginPage,         title: 'Sign In',       }}/>   ); } } }