Description
- Review the documentation: https://facebook.github.io/react-native
- Search for existing issues: https://github.com/facebook/react-native/issues
- Use the latest React Native release: https://github.com/facebook/react-native/releases
Environment
Environment:
OS: macOS High Sierra 10.13.4
Node: 8.11.2
Yarn: 1.6.0
npm: 6.1.0
Watchman: 4.9.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.1 AI-173.4819257
Packages: (wanted => installed)
react: ^16.3.2 => 16.3.2
react-native: ^0.55.4 => 0.55.4
(I can't upgrade react-native to latest version yet due to babel errors)
Description
On Android, when I set a Timeout or an Interval via setTimeout / setInterval, the first call will be triggered much earlier than the given timeout. The subsequent calls for an Interval are triggered at the right timing.
Reproducible Demo
Here is a minimal code sample. To reproduce : run in debug mode, press the start button and read the console log.
import { Button, View } from "react-native"
class Test extends React.Component {
timer = 0
scheduleTime = 0
componentWillUnmount() {
this.stop()
}
schedule() {
this.scheduleTime = (new Date()).getTime()
console.log(`schedule: ${this.scheduleTime}`)
this.timer = setInterval(() => this.trigger(), 3000)
}
trigger() {
const triggerTime = (new Date()).getTime()
console.log(`triggered: ${triggerTime}`)
console.log(`duration: ${triggerTime - this.scheduleTime}`)
}
stop() {
console.log("stop")
clearInterval(this.timer);
this.timer = 0;
}
render() {
return <View>
<Button title="start" onPress={() => this.schedule()} />
<Button title="stop" onPress={() => this.stop()} />
</View>
}
}
The console log through chrome debugger is:
triggered: 1532358387130
duration: 793
triggered: 1532358390141
duration: 3804
triggered: 1532358393169
duration: 6832
triggered: 1532358396164
duration: 9827
stop
If I set the interval time parameter to 5000ms, the first duration is ~2790, with 10 000 it becomes ~7800, which is better but for smaller durations it is very problematic.
I am going to try with timer-mixin and react-native-timer later.