React Native Timer and Stopwatch Example

Jun 30, 2022 . Admin

Hi Guys,

Now, let's see tutorial of react native timer and stopwatch example. This tutorial will give you simple example of how to implement timer and stopwatch in react native. we will help you to give example of timer and stopwatch example in react native. let’s discuss about how to use timer and stopwatch in react native. Follow bellow tutorial step of 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:

Step 1: Download Project

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

expo init ExampleApp

Step 2: Install and Setup

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

npm install react-native-stopwatch-timer

Step 3: App.js

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;

Run Project

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