Timers in React Native (this.setTimeout)

user_4945721 0
Viewed 38370

I'm trying to set up a TimeOut function in my component. To my understanding, just using setTimeout as you would for the web isn't a proper answer. It would cause timing and leak memory issue.

I've read there is an existing Timers API in react-native.

However, it is not compliant with ES6, i quote :

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.

And on react-mixin, we find this message :

Note: mixins are basically dead. Only use this as a migration path for legacy code. Prefer High Order Components.

So my final question is : How do we properly use timers (setTimeOut), with react-native, in 2017 ?

react-native timer javascript
4 Answers

For the sake of also adding what it would look like with functional component and hooks.

import React, { useEffect } from 'react'
import { Text } from 'react-native'

const Component = props => {

    useEffect(() => {
        let timer = setInterval(() => console.log('fire!'), 1000);

        return () => clearInterval(timer)
    }, [])

    return <Text>Example of using setInterval with hooks</Text>
}
user_120268960

Take refrence from @chiquyet , Thank you @chiquyet

https://stackoverflow.com/a/47549754/11754047

this.clearInterval(this.state.timer);

Will throw error in react native

Description

Simple timer in react native with 5 secounds, along with validation and alert

I try in, () => "react": "16.9.0", "react-native": "0.61.5",

Snack Expo Link () => https://snack.expo.io/PuYxRmueW

import React from 'react'
import { View, Text, Button, SafeAreaView, TextInput } from 'react-native'

export default class Timer extends React.Component {

    state = {
        timer: null,
        counter: 5,
    };

    startTimer = () => {

        let timer = setInterval(this.manageTimer, 1000);
        this.setState({ timer });

    }

    manageTimer = () => {

        var states = this.state

        if (states.counter === 0) {
            alert('Times Up !\nTimer  is reset')
            clearInterval(this.state.timer)
            this.setState({
                counter: 5
            })
        }
        else {
            this.setState({
                counter: this.state.counter - 1
            });

        }
    }

    componentWillUnmount() {
        clearInterval(this.state.timer);
    }



    render() {
        return (
            <SafeAreaView>


                <Text style={{ textAlign: 'center' }}>{this.state.counter}</Text>

                <View>
                    <Button
                        title='START TIMER'
                        onPress={() => this.startTimer()}
                    />
                </View>
            </SafeAreaView>
        )
    }
}

Hope this will help you :)

user_117540470

Timer is not a part of 'react-native' package

  • cd /path_to_your_project
  • install react-timer-mixin package
  • add Timer in .js file

  • setup timer

    npm i react-timer-mixin --save (from console)

import TimerMixin from 'react-timer-mixin';
this.interval = setInterval(() => {
    //DO SOMETHING
}, 5);
user_88664930
Related