react-native-stopwatch-timer

React Native Stopwatch Timer

A React Native component that provides a stopwatch and timer.

$3

``npm install react-native-stopwatch-timer`

`js
import { Stopwatch, Timer } from 'react-native-stopwatch-timer'
`

$3

#### 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")|

$3

`js
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 (

reset={this.state.stopwatchReset}
options={options}
getTime={this.getFormattedTime} />

{!this.state.stopwatchStart ? "Start" : "Stop"}


Reset

reset={this.state.timerReset}
options={options}
handleFinish={handleTimerComplete}
getTime={this.getFormattedTime} />

{!this.state.timerStart ? "Start" : "Stop"}


Reset


);
}
}

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);

``