React Native Stopwatch Timer
A React Native component that provides a stopwatch and timer.
Instructions
npm install react-native-stopwatch-timer
import { Stopwatch, Timer } from 'react-native-stopwatch-timer'Options
Stopwatch and Timer Options
| Name | Type | Description | Default |
|---|---|---|---|
| start | boolean | starts timer/stopwatch if true, stops if false | false |
| reset | boolean | stops timer/stopwatch, resets | false |
| msecs | boolean | includes milliseconds in render of time | false |
| options | object | describes style of rendered timer/stopwatch | see example |
| getTime | function | get the formatted value on each tick | (time) => console.log(time) |
| getMsecs | function | get the number of msecs on each tick | (time) => console.log(time) |
Stopwatch Options
| Name | Type | Description | Default |
|---|---|---|---|
| laps | boolean | will not count the laps of the stopped stopwatch | false |
| startTime | number | number of milliseconds to start stopwatch from | 0 |
Timer Options
| Name | Type | Description | Default |
|---|---|---|---|
| totalDuration | Integer | number of milliseconds to set timer for | 0 |
| handleFinish | function | function to perform when timer completes | () => alert("Timer Finished") |
Example
import React, { Component } from 'react';
import { AppRegistry, StyleSheet,Text,View, TouchableHighlight } from 'react-native';
import { Stopwatch, Timer } from 'react-native-stopwatch-timer';
class TestApp extends Component {
constructor(props) {
super(props);
this.state = {
timerStart: false,
stopwatchStart: false,
totalDuration: 90000,
timerReset: false,
stopwatchReset: false,
};
this.toggleTimer = this.toggleTimer.bind(this);
this.resetTimer = this.resetTimer.bind(this);
this.toggleStopwatch = this.toggleStopwatch.bind(this);
this.resetStopwatch = this.resetStopwatch.bind(this);
}
toggleTimer() {
this.setState({timerStart: !this.state.timerStart, timerReset: false});
}
resetTimer() {
this.setState({timerStart: false, timerReset: true});
}
toggleStopwatch() {
this.setState({stopwatchStart: !this.state.stopwatchStart, stopwatchReset: false});
}
resetStopwatch() {
this.setState({stopwatchStart: false, stopwatchReset: true});
}
getFormattedTime(time) {
this.currentTime = time;
};
render() {
return (
<View>
<Stopwatch laps msecs start={this.state.stopwatchStart}
reset={this.state.stopwatchReset}
options={options}
getTime={this.getFormattedTime} />
<TouchableHighlight onPress={this.toggleStopwatch}>
<Text style={{fontSize: 30}}>{!this.state.stopwatchStart ? "Start" : "Stop"}</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this.resetStopwatch}>
<Text style={{fontSize: 30}}>Reset</Text>
</TouchableHighlight>
<Timer totalDuration={this.state.totalDuration} msecs start={this.state.timerStart}
reset={this.state.timerReset}
options={options}
handleFinish={handleTimerComplete}
getTime={this.getFormattedTime} />
<TouchableHighlight onPress={this.toggleTimer}>
<Text style={{fontSize: 30}}>{!this.state.timerStart ? "Start" : "Stop"}</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this.resetTimer}>
<Text style={{fontSize: 30}}>Reset</Text>
</TouchableHighlight>
</View>
);
}
}
const handleTimerComplete = () => alert("custom completion function");
const options = {
container: {
backgroundColor: '#000',
padding: 5,
borderRadius: 5,
width: 220,
},
text: {
fontSize: 30,
color: '#FFF',
marginLeft: 7,
}
};
AppRegistry.registerComponent('TestApp', () => TestApp);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent