How to Create CountDown Timer with React Native?


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;
    }, []);

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.container}>
                <Text style={styles.title}>
                    React Native CountDown Timer 
                    timetoShow={('H', 'M', 'S')}
                    onFinish={() => alert('finished')}
                    onPress={() => alert('hello')}

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?


Like it? Share with your friends!