0.0.3 • Published 5 years ago
react-native-simple-stopwatch v0.0.3
React Native Stopwatch Timer
A React Native component that provides a stopwatch and timer. Forked from https://github.com/michaeljstevens/react-native-stopwatch-timer. Added totalDuration, starttime and handleFinish() props to stopwatch.
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 |
Stopwatch Options
Name | Type | Description | Default |
---|---|---|---|
laps | boolean | will not count the laps of the stopped stopwatch | false |
totalDuration (optional) | number | number of milliseconds until the stopwatch stops | null |
startTime (optional) | number | date object of when the stopwatch started - useful when you want to have the stopwatch continue where you left off | new Date() |
handleFinish (optional) | function | callback function for when stopwatch reaches the totalDuration | () => console.log("Stopwatch Finished") |
getTime | function | get the formatted value on each tick | (time) => console.log(time) |
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") |
getTime | function | get the formatted value on each tick | (time) => console.log(time) |
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);