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  lt LoadingPage  gt        else        return            lt NavigatorIOS           style    styles container            initialRoute                  component  LoginPage              title   Sign In                 gt                         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

User · Answer

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   gt  notation  es6 will auto-bind this   setTimeout      gt   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

User · Answer

On ReactNative  53  the following works for me    this timeoutCheck   setTimeout      gt       this setTimePassed          400      setTimeout  is the ReactNative library function   this timeoutCheck  is my variable to hold the time out object   this setTimePassed  is my function to invoke at the time out

User · Answer

In case anyone wants it  you can also make the timer async and await it   export const delay    ms    gt  new Promise  res    gt  setTimeout res  ms      Usage       do something await delay 500      wait 0 5 seconds    do something else

User · Answer

Write a new function for settimeout  Pls try this    class CowtanApp extends Component     constructor props     super props     this state       timePassed  false         componentDidMount       this setTimeout       gt         this setTimePassed        1000      setTimePassed        this setState  timePassed  true        render      if   this state timePassed     return  lt LoadingPage  gt    else    return        lt NavigatorIOS       style    styles container        initialRoute              component  LoginPage          title   Sign In             gt

User · Answer

Change this code   setTimeout function   this setState  timePassed  true     1000     to the following   setTimeout     gt  this setState  timePassed  true     1000

User · Answer

You can bind this to your function by adding  bind this  directly to the end of your function definition  You would rewrite your code block as   setTimeout function        this setState   timePassed  true       bind this   1000

User · Answer

const getData        gt       some functionality    const that   this     setTimeout      gt          write your functions        that getData     6000     Simple  Settimout function get triggered after 6000 milliseonds

User · Answer

Never call setState inside render method   You should never ever call setState inside the render method  Why  calling setState eventually fires the render method again  That means you are calling setState  mentioned in your render block  in a loop that would never end  The correct way to do that is by using componentDidMount hook in React  like so   class CowtanApp extends Component     state          timePassed  false        componentDidMount           setTimeout      gt  this setState  timePassed  true    1000         render          return this state timePassed              lt NavigatorIOS           style    styles container            initialRoute                  component  LoginPage              title   Sign In               gt           lt LoadingPage  gt          PS Use ternary operators for cleaner  shorter and readable code

User · Answer

import React   Component  from  react   import  StyleSheet  View  Text  from  react-native    class App extends Component     componentDidMount         setTimeout      gt          this props navigation replace  LoginScreen           2000          render         return          lt View style  styles MainView  gt           lt Text gt React Native lt  Text gt         lt  View gt                const styles   StyleSheet create     MainView        flex  1      alignItems   center       justifyContent   center             export default App

User · Answer

Simple setTimeout     gt  this setState  loaded  true     1000   use this for timeout

User · Answer

Same as above  might help some people    setTimeout      gt      if  pushToken  null  amp  amp  deviceId  null        console log  pushToken  amp  OS         this setState   pushToken  pushToken        this setState   deviceId  deviceId         console log  pushToken  amp  OS   pushToken   n  deviceId          1000

User · Answer

There looks to be an issue when the time of the phone emulator is different to the one of the server  where react-native packager is running   In my case there was a 1 minute difference between the time of the phone and the computer  After synchronizing them  didn t do anything fancy  the phone was set on manual time  and I just set it to use the network sim  provided time   everything worked fine  This github issue helped me find the problem

[javascript] setTimeout in React Native

Examples related to javascript

Examples related to ios

Examples related to settimeout

Examples related to react-native