How to Create CountDown Timer using React Native?

When “How to Create CountDown Timer using React Native?” moves through design, development and browser testing, the complete guide can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the React Native project before adopting it in production.

Hi Guys,

This post will give you example of how to create countdown timer using react native. I explained simply step by step react native countdown timer example. you can understand a concept of how to implement countdown timer in react native. This tutorial will give you simple example of countdown timer in react-native. So, let's follow few step to create example of how to use countdown timer in react native.

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

First of all you have to install react-native-countdown-component package and moment package.

npm install react-native-countdown-component

npm install moment --save

Step 3: App.js

In this step, You will open the App.js file and put 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 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...