javascript - this.setTimeout() is not a function React native? -

i'm trying create simple stopwatch timer in react native , i've created new component called chrono handle clock data(hours, minutes, etc.)

i'm triggering clock count on button press in following code:

import react, { component } 'react'; import { view, text, touchableopacity, appregistry, stylesheet, alert } 'react-native'; import chrono './app/chrono.js';  export default class morphx extends component {   constructor(props) {     super(props)     this.state = {       randomcounter: 0     }     this.chrono = null   }    onitempressed = () => {     this.chrono.starttimer()   }    updaterandomcounter = () => {     this.setstate({       randomcounter: this.state.randomcounter + 1     })   }    clearcounter = () => {     this.setstate({        randomcounter: 0     })   }    render() {     return (       <view style={styles.mainwrapper}>         <view style={styles.upperwrapper}>           <chrono ref = { r => this.chrono = r} />         </view>         <view style={styles.bottomwrapper}>           <view style={styles.initialbuttons}>             <touchableopacity               style={styles.touchablebutton}               text="let's start!"               onpress={() => this.onitempressed()}>               <text style={styles.buttontexts}>                 count up!               </text>             </touchableopacity>             <touchableopacity               style={styles.touchablebutton}               title="reset!"               onpress={() => this.clearcounter()}>               <text style={styles.buttontexts}>                 reset!               </text>             </touchableopacity>           </view>         </view>       </view>     );   } } appregistry.registercomponent('morphx', () => morphx); 

and starttimer implemented in chrono.js component here:

import react, { component } 'react'; import { view, text, touchableopacity, appregistry, stylesheet, alert } 'react-native';  class chrono extends component {     constructor(props) {         super(props)         this.state = {             hours: 0,             minutes: 0,             seconds: 0         }     }      // chronometer start function     starttimer = () => {         console.log(this)         this.settimeout(function() {             console.log('hey!')             this.setstate({                 seconds: 1             })           }, 1000);     }      // chronometer pause function      pausetimer = () => {      }      // chronometer reset function      resettimer = () => {      }      render() {         return (             <view style={styles.clockwrapper}>                 <text style={styles.hourwrapper}>                     {this.state.hours}                 </text>                 <text style={styles.colonwrapper}>                     :                 </text>                 <text style={styles.minutewrapper}>                     {this.state.minutes}                 </text>                 <text style={styles.colonwrapper}>                     :                 </text>                 <text style={styles.secondswrapper}>                     {this.state.seconds}                 </text>             </view>         )     } }  export default chrono 

i'm facing error

this.settimeout not function

on line i'm calling settimeout reason. why?

timermixin not included default react-native. have install , can use this.settimeout. check here detailed information.

this library not ship react native - in order use on project, need install with
npm react-timer-mixin --save
project directory.

---

keep in mind if use es6 classes react components there no built-in api mixins. use timermixin es6 classes, recommend react-mixin.