react-native-simple-stopwatch

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