How to Implement Timer and Stopwatch in React Native?

Hi Guys,

This post is focused on how to implement timer and stopwatch in react native. we will help you to give example of react native timer and stopwatch example. We will look at example of how to use timer and stopwatch in react native. you can understand a concept of timer and stopwatch example in react native. follow bellow step for how to create timer and stopwatch in react native.

A Stopwatch is a special watch that can be used to count the time. In stopwatch time starts from zero and runs until we stop it but Timer is the exact opposite of it. In the Timer, we decide the time to count and it counts towards zero.

Let's start following example:

In the first step run the following command to create a project.

expo init ExampleApp

You can install react native stopwatch timer to create stopwatch and timer:

npm install react-native-stopwatch-timer

In this step, You will open the App.js file and put the code.

import React, { useState } from 'react';
import { SafeAreaView, StyleSheet, Text, View, TouchableHighlight } from 'react-native';
import { Stopwatch, Timer } from 'react-native-stopwatch-timer';

const App = () => {
    const [isTimerStart, setIsTimerStart] = useState(false);
    const [isStopwatchStart, setIsStopwatchStart] = useState(false);
    const [timerDuration, setTimerDuration] = useState(90000);
    const [resetTimer, setResetTimer] = useState(false);
    const [resetStopwatch, setResetStopwatch] = useState(false);

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.container}>
                <View style={styles.sectionStyle}>
                    <Stopwatch
                        laps
                        msecs
                        start={isStopwatchStart}
                        reset={resetStopwatch}
                        options={options}
                        getTime={(time) => {
                            console.log(time);
                        }}
                    />
                    <TouchableHighlight
                        onPress={() => {
                            setIsStopwatchStart(!isStopwatchStart);
                            setResetStopwatch(false);
                        }}
                    >
                        <Text style={styles.buttonText}>
                            {!isStopwatchStart ? 'START' : 'STOP'}
                        </Text>
                    </TouchableHighlight>
                    <TouchableHighlight
                        onPress={() => {
                            setIsStopwatchStart(false);
                            setResetStopwatch(true);
                        }}
                    >
                        <Text style={styles.buttonText}>RESET</Text>
                    </TouchableHighlight>
                </View>
                <View style={styles.sectionStyle}>
                    <Timer
                        totalDuration={timerDuration}
                        msecs
                        start={isTimerStart}
                        reset={resetTimer}
                        options={options}
                        handleFinish={() => {
                            alert('Custom Completion Function');
                        }}
                        getTime={(time) => {
                            console.log(time);
                        }}
                    />
                    <TouchableHighlight
                        onPress={() => {
                            setIsTimerStart(!isTimerStart);
                            setResetTimer(false);
                        }}
                    >
                        <Text style={styles.buttonText}>
                            {!isTimerStart ? 'START' : 'STOP'}
                        </Text>
                    </TouchableHighlight>
                    <TouchableHighlight
                        onPress={() => {
                            setIsTimerStart(false);
                            setResetTimer(true);
                        }}
                    >
                        <Text style={styles.buttonText}>RESET</Text>
                    </TouchableHighlight>
                </View>
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 10,
        justifyContent: 'center',
        alignItems: 'center',
    },
    title: {
        textAlign: 'center',
        fontSize: 20,
        fontWeight: 'bold',
        padding: 20,
    },
    sectionStyle: {
        marginTop: 32,
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttonText: {
        fontSize: 20,
        marginTop: 10,
    },
});

const options = {
    container: {
        backgroundColor: '#FF0000',
        padding: 5,
        borderRadius: 5,
        width: 200,
        alignItems: 'center',
    },
    text: {
        fontSize: 25,
        color: '#FFF',
        marginLeft: 7,
    },
};

export default App;

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

It will help you...