Status update every x seconds

Question

I try to update the state every 3 seconds.

export default class Calendar extends Component { constructor(props) { super(props); this.state = { timeLineTop: 75, }; } render() { this.state.timeLineTop = setInterval(function () { let d = new Date(); let result = d.getHours() + d.getMinutes() / MINUTES_IN_HOUR; return result; }, 3000); <View style={[ { top: this.state.timeLineTop }, ]}></View> } } 

Why does this not update the position of my views every 3 seconds?

Answer 1

** Updated to implement TimerMixin

You need to call this.setState to update the state variable and, as pointed out by @ eyal83, use TimerMixin for setTimeout and setInterval:

 var TimerMixin = require('react-timer-mixin'); componentDidMount: function() { this.setInterval( () => { let d = new Date(); let result = d.getHours() + d.getMinutes() / MINUTES_IN_HOUR; this.setState({ timeLineTop: result }) }, 500); } 

I also installed a base application that reloads the state variable using setInterval here , code below. https://rnplay.org/apps/9gD-Nw

 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var TimerMixin = require('react-timer-mixin'); var SampleApp = React.createClass({ mixins: [TimerMixin], getInitialState: function() { return { timeLineTop: 75 } }, componentDidMount: function() { this.setInterval( () => { this.setState({ timeLineTop: this.state.timeLineTop+1 }) }, 500); }, render: function() { return ( <View style={styles.container}> <View style={[ { marginTop: this.state.timeLineTop }, ]}><Text>TOP - {this.state.timeLineTop}</Text></View> </View> ); } }); var styles = StyleSheet.create({ container: { flex: 1, marginTop:60, }, }); AppRegistry.registerComponent('SampleApp', () => SampleApp); 

Answer 2

Using setTimeout and setInterval around the world is a very bad idea.

We strongly discourage the use of global setTimeout (...) and recommend using this.setTimeout (...) provided by the timer-mixin response tool instead. This will save you from many of the difficulties associated with tracking errors, such as failures caused by timeouts after the component has been unmounted.

More information here: https://facebook.imtqy.com/react-native/docs/timers.html#timermixin

Turn on timer mixing as follows:

 var TimerMixin = require('react-timer-mixin'); var Component = React.createClass({ mixins: [TimerMixin], componentDidMount: function() { this.setInterval( () => { console.log('I do not leak!'); }, 500 ); } }); 

Answer 3

This code works in React Native 0.47.1

 import TimerMixin from 'react-timer-mixin'; mixins: [TimerMixin]; componentDidMount() { this.interval = setInterval(() => { console.log("Hi"); }, 6000); //6 seconds } 

Answer 4

In ES6, you should use a mixin reaction, ( https://github.com/brigand/react-mixin ), for example:

 var reactMixin = require('react-mixin'); var someMixin = require('some-mixin'); class Foo extends React.Component { render: function(){ return <div /> } } reactMixin(Foo.prototype, someMixin); reactMixin(Foo.prototype, someOtherMixin); 

Answer 5

ES6 solution that worked for me, I found it here https://github.com/reactjs/react-timer-mixin/issues/4

 componentDidMount() { this.timer = setTimeout(() => { console.log('I do not leak!'); }, 5000); } componentWillUnmount() { clearTimeout(this.timer); }