How to Create Timer and Stopwatch in React Native?

04-Apr-2023

.

Admin

How to Create Timer and Stopwatch in React Native?

Hi Guys,

This article will provide some of the most important example how to create timer and stopwatch in react native. This tutorial will give you simple example of react native timer and stopwatch example. This post will give you simple example of how to implement timer and stopwatch in react native. This post will give you simple example of how to use timer and stopwatch in react native. So, let's follow few step to create example of timer and stopwatch example 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.

expo start

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

Output :

It will help you...

#React Native