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