Building Simple StopWatch with React-Native

Let’s start building simple StopWatch App for iOS in React Native. We are not implementing LAP functionality into it, Just keeping it more and more simple. You are free to extend the functionality accordingly.

First of all, Let’s see the final result of our StopWatch App.

Functionalities:

• Start and Clear button will active once you click on Stop button
• Stop button will stop the timer without reseting the time.
• Clear button will reset the timer

Now lets start with the codes. First create your App using react-native init stopwatch. Create a new file StopWatch.js. We are going to use StyleSheet, View, Text, Button components for building our App. We need to add some states to handle our data in our App.

state = {
    timer: null,
    counter: '00',
    miliseconds: '00',
    startDisabled: true,
    stopDisabled: false
}

Now let’s start building our StopWatch component.

class StopWatch extends Component {

    state = {
        timer: null,
        counter: '00',
        miliseconds: '00',
        startDisabled: true,
        stopDisabled: false
    }


    constructor( props ) {
        super( props );

        this.onButtonStart = this.onButtonStart.bind(this);
        this.onButtonStop = this.onButtonStop.bind(this);
        this.onButtonClear = this.onButtonClear.bind(this);
        this.start = this.start.bind(this);
    }

    ....
}

We are using 4 events to handle our stopwatch functionality.

• onButtonStart() is handling the event to start the stopwatch.
• onButtonStop() event will stop the stopwatch main timer
• onButtonClear() event will reset our stopwatch
• start() event trigger on componentDidMount() and with onButtonStart().

Next step is to start the timer and update the states accordingly.

    ....
    componentDidMount() {
        this.start();
    }


    componentWillUnmount() {
        clearInterval(this.state.timer);
    }



    start() {
        var self = this;
        let timer = setInterval(() => {
            var num = (Number(this.state.miliseconds) + 1).toString(),
                count = this.state.counter;

            if( Number(this.state.miliseconds) == 99 ) {
                count = (Number(this.state.counter) + 1).toString();
                num = '00';
            }

            self.setState({
                counter: count.length == 1 ? '0'+count : count,
                miliseconds: num.length == 1 ? '0'+num : num
            });
        }, 0);
        this.setState({timer});
    }
    ....

We have used setInterval() to update the counter states and clearInterval() to stop the timer. Now lets define events that handle the click event on buttons.

....
    onButtonStart() {

        this.start();
        this.setState({startDisabled: true, stopDisabled: false});
    }


    onButtonStop() {
        clearInterval(this.state.timer);
        this.setState({startDisabled: false, stopDisabled: true});
    }


    onButtonClear() {
        this.setState({
            timer: null,
            counter: '00',
            miliseconds: '00'
        });
    }
    ....

Last stop is to add the view that display our stopwatch and attach the events to the buttons.

    ....
    render() {
        return(
            
               {this.state.counter}
                {this.state.miliseconds}
                
                    <button title="Start" disabled="disabled"></button>
                    <button title="Stop" disabled="disabled"></button>
                    <button title="Clear" disabled="disabled"></button>
                
            
        );
    }
    ....

Let’s add some basic style to our stopWatch

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    counter: {
      fontSize: 60,
      textAlign: 'center',
      height: 60,
      margin: 10,
    },
    miniCounter: {
        fontSize:20,
        position: 'relative',
        top: -32,
        right: -50
    }
});

That’s it. We have finished our stopwatch App. Here is full code for StopWatch component.

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    Button,
    View
} from 'react-native';

class StopWatch extends Component {

    state = {
        timer: null,
        counter: '00',
        miliseconds: '00',
        startDisabled: true,
        stopDisabled: false
    }


    constructor( props ) {
        super( props );

        this.onButtonStart = this.onButtonStart.bind(this);
        this.onButtonStop = this.onButtonStop.bind(this);
        this.onButtonClear = this.onButtonClear.bind(this);
        this.start = this.start.bind(this);
    }



    componentDidMount() {
        this.start();
    }


    componentWillUnmount() {
        clearInterval(this.state.timer);
    }



    start() {
        var self = this;
        let timer = setInterval(() => {
            var num = (Number(this.state.miliseconds) + 1).toString(),
                count = this.state.counter;

            if( Number(this.state.miliseconds) == 99 ) {
                count = (Number(this.state.counter) + 1).toString();
                num = '00';
            }

            self.setState({
                counter: count.length == 1 ? '0'+count : count,
                miliseconds: num.length == 1 ? '0'+num : num
            });
        }, 0);
        this.setState({timer});
    }





    onButtonStart() {

        this.start();
        this.setState({startDisabled: true, stopDisabled: false});
    }


    onButtonStop() {
        clearInterval(this.state.timer);
        this.setState({startDisabled: false, stopDisabled: true});
    }


    onButtonClear() {
        this.setState({
            timer: null,
            counter: '00',
            miliseconds: '00'
        });
    }




    render() {
        return(
            
               {this.state.counter}
                {this.state.miliseconds}
                
                    <button title="Start" disabled="disabled"></button>
                    <button title="Stop" disabled="disabled"></button>
                    <button title="Clear" disabled="disabled"></button>
                
            
        );
    }
}



const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    counter: {
      fontSize: 60,
      textAlign: 'center',
      height: 60,
      margin: 10,
    },
    miniCounter: {
        fontSize:20,
        position: 'relative',
        top: -32,
        right: -50
    }
});


module.exports = StopWatch;