Create countdown timer with react native
Hi Developers,
This article will give you example of how to create countdown timer with react native. We will explain easy step by step react native countdown timer code snippet. You can learn a concept of how to execute countdown timer with react native. This tutorial will give you easy example of countdown timer with using react-native. So,
Let’s start following example:
Step 1: Download Project
First step run the given command to create a new project.
expo init ExampleApp
Step 2: Install and Setup
Now you have to install react-native-countdown-component package and moment package using npm command.
npm install react-native-countdown-component
npm install moment --save
Step 3: App.js
In 3rd step, You will open the App.js file to editor and add the code.
import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import CountDown from 'react-native-countdown-component';
import moment from 'moment';
const App = () => {
const [totalDuration, setTotalDuration] = useState(0);
useEffect(() => {
let date = moment().utcOffset('+05:30').format('YYYY-MM-DD hh:mm:ss');
let expirydate = '2022-07-16 12:00:00';
let diffr = moment.duration(moment(expirydate).diff(moment(date)));
var hours = parseInt(diffr.asHours());
var minutes = parseInt(diffr.minutes());
var seconds = parseInt(diffr.seconds());
var d = hours * 60 * 60 + minutes * 60 + seconds;
setTotalDuration(d);
}, []);
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<Text style={styles.title}>
React Native CountDown Timer
</Text>
<CountDown
until={totalDuration}
timetoShow={('H', 'M', 'S')}
onFinish={() => alert('finished')}
onPress={() => alert('hello')}
size={20}
/>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
justifyContent: 'center',
alignItems: 'center',
},
title: {
textAlign: 'center',
fontSize: 20,
fontWeight: 'bold',
padding: 20,
},
});
export default App;
Run Project
In the final step run your project using the given command.
expo start
You can scan QR code using Expo Go Application on mobile.
Also Read: How to Create DataTable with React Native?
Output
0 Comments