asbanday-react-native-stopwatch-timer

React Native Stopwatch Timer

A React Native component that provides a stopwatch and timer. It was edited to include options not included in the oringal package.

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
largestUnitOfTime	string	largest unit of time to display. options are ("hours","minutes","seconds"	"hours"
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)
justText	boolean	returns a simple text component if true	false

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