04-Apr-2023
.
Admin
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