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

Question

I'm trying to create a simple stopwatch timer in React Native and I've created a new component called Chrono to handle the clock data(hours, minutes, etc.)

I'm triggering the clock count up on a button press in the following code:

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, AppRegistry, StyleSheet, Alert } from 'react-native';
import Chrono from './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 the startTimer is implemented in the Chrono.js component here:

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, AppRegistry, StyleSheet, Alert } from '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 the error

this.setTimeout is not a function

on the line where I'm calling the setTimeout for some reason. Why?

@T.J.Crowder React-Native has its own implementation of Timers. — bennygenel, Sep 10 '17 at 11:16
@T.J.Crowder react-native usually comes with all the capabilities all together. 99% of the topics talked in docs already included, this is one of that isn't. Its pretty understandable for a new user to expect it already included. — bennygenel, Sep 10 '17 at 11:20
@bennygenel: I'm shocked to see that the mixin puts it on the component itself. Following the link you provide below explains why; without that context, it seems like massive smell. And that explains the OP's question, thanks. — T.J. Crowder, Sep 10 '17 at 11:24

bennygenel · Accepted Answer · 2017-09-10T11:36:27.477

4

TimerMixin is not included with the default react-native. You have to install it yourself and then you can use this.setTimeout. Check here for detailed information.

This library does not ship with React Native - in order to use it on your project, you will need to install it with
npm i react-timer-mixin --save
from your project directory.

Keep in mind that if you use ES6 classes for your React components there is no built-in API for mixins. To use TimerMixin with ES6 classes, we recommend react-mixin.

edited Sep 10 '17 at 11:36

answered Sep 10 '17 at 11:13

bennygenel

23,896
6
65
78

(november 2017). I hope everyone using ES6. And (https://github.com/brigand/react-mixin) react-mixin is said to be deprecated. Is this the right way to solve the issue ? – Louis Lecocq Nov 27 '17 at 13:24
1

@LouisLecocq I don't think it is still a valid solution. – bennygenel Nov 27 '17 at 13:51
1

Ok. i thought the answer was posted in September 2017. I'll try to post a new one then – Louis Lecocq Nov 27 '17 at 13:53
@LouisLecocq it would be nice to have a better answer if you have any. OP can change the answer ans I can delete mine – bennygenel Nov 27 '17 at 13:54
https://stackoverflow.com/questions/47513549/timers-in-react-native-this-settimeout feel free to add any details in edit mode ;) – Louis Lecocq Nov 27 '17 at 14:45

score 3 · Answer 2 · answered Sep 11 '18 at 06:30

3

I'm used setTimeout() without including react-timer-mixin, and its working fine in my application.

componentDidMount() {

    const a = setTimeout(() => {

      // do some stuff here

    }, 100);

}

answered Sep 11 '18 at 06:30

Manish Ahire

1,243
13
11

score 0 · Answer 3 · answered Aug 30 '19 at 19:08

setTimeout() is global and actually window.setTimeout() in a browser, in React Native window is implied for global functions that use it. so this.setTimeout() should actually be just setTimeout().

Additionally see setTimeout in React Native that the callback function inside the setTimeout() changes the scope of "this"

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

3 Answers3