How to Create Countdown Timer using React Native ?

Our main objective focuses on constructing a straightforward and use­r-friendly countdown timer that impeccably showcase­s the remaining time le­ft in terms of years, days, hours, minutes, and seconds until a specific date.

To set up your de­velopment environment, begin by installing Node.js. Next, utilize the Expo CLI edition to seamle­ssly execute Re­act Native apps. Expo, a platform built on JavaScript and React, caters to creating cross-platform mobile applications for iOS, Android, and web environments. It provides an array of tools and services that effectively streamline­ the entire de­velopment process.

Prerequisites

• Introduction to React Native
• React Native Components
• Expo CLI
• Node.js and npm (Node Package Manager)

Steps to Create React Native Application

Step 1: Create a react native application by using this command

npx create-expo-app CountdownTimerApp

Step 2: After creating your project folder, i.e. CountdownTimerApp, use the following command to navigate to it

cd CountdownTimerApp

Project Structure

Approach

In this Approach, we will use the `react-native­-modal-datetime-picker` library to e­nable date and time se­lection. Upon launching, the app sets a de­fault countdown date and time, then calculate­s and displays the remaining time in te­rms of years, days, hours, minutes, and seconds using an ae­sthetically pleasing format. The use­r can easily start or reset the­ countdown by pressing dedicated buttons labe­led “Start Timer” and “Rese­t Timer,” respective­ly. Upon completion of the countdown, the time­r automatically resets itself.

To Install the react-native­-modal-datetime-picker` library use the following command:

npm install react-native-modal-datetime-picker

Example: In this example, we’ll use above explained approach

Javascript

// App.js

import React, { useState, useEffect } from "react";
import {
    SafeAreaView,
    StyleSheet,
    Text,
    View,
    Button,
} from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";

const App = () => {
    const [isDatePickerVisible, setDatePickerVisible] =
        useState(false);
    const [expiryDate, setExpiryDate] = useState(
        new Date()
    ); // Default to current date and time
    const [timeUnits, setTimeUnits] = useState({
        years: 0,
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0,
    });

    useEffect(() => {
        const calculateTimeUnits = (timeDifference) => {
            const seconds = Math.floor(
                timeDifference / 1000
            );
            setTimeUnits({
                years: Math.floor(
                    seconds / (365 * 24 * 60 * 60)
                ),
                days: Math.floor(
                    (seconds % (365 * 24 * 60 * 60)) /
                        (24 * 60 * 60)
                ),
                hours: Math.floor(
                    (seconds % (24 * 60 * 60)) / (60 * 60)
                ),
                minutes: Math.floor(
                    (seconds % (60 * 60)) / 60
                ),
                seconds: seconds % 60,
            });
        };

        const updateCountdown = () => {
            const currentDate = new Date().getTime();
            const expiryTime = expiryDate.getTime();
            const timeDifference = expiryTime - currentDate;

            if (timeDifference <= 0) {
                // Countdown finished
                calculateTimeUnits(0);
            } else {
                calculateTimeUnits(timeDifference);
            }
        };

        updateCountdown();
        const interval = setInterval(updateCountdown, 1000);

        return () => clearInterval(interval);
    }, [expiryDate]);

    const formatTime = (time) => {
        return time.toString().padStart(2, "0");
    };

    const handleStartTimer = () => {
        setDatePickerVisible(true);
    };

    const handleResetTimer = () => {
        setExpiryDate(new Date()); // Reset to current date and time
    };

    const handleDateConfirm = (date) => {
        setExpiryDate(date);
        setDatePickerVisible(false);
    };

    const handleDateCancel = () => {
        setDatePickerVisible(false);
    };

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.container}>
                <Text style={styles.title}>
                    Geeksforgeeks
                </Text>
                <Text style={styles.subtitle}>
                    React Native Countdown Timer
                </Text>
                <View style={styles.timer}>
                    <Text
                        style={[
                            styles.timeUnit,
                            styles.yearUnit,
                        ]}
                    >
                        {formatTime(timeUnits.years)}
                    </Text>
                    <Text
                        style={styles.timeSeparator}
                    ></Text>
                    <Text
                        style={[
                            styles.timeUnit,
                            styles.dayUnit,
                        ]}
                    >
                        {formatTime(timeUnits.days)}
                    </Text>
                    <Text
                        style={styles.timeSeparator}
                    ></Text>
                    <Text
                        style={[
                            styles.timeUnit,
                            styles.hourUnit,
                        ]}
                    >
                        {formatTime(timeUnits.hours)}
                    </Text>
                    <Text
                        style={styles.timeSeparator}
                    ></Text>
                    <Text
                        style={[
                            styles.timeUnit,
                            styles.minuteUnit,
                        ]}
                    >
                        {formatTime(timeUnits.minutes)}
                    </Text>
                    <Text
                        style={styles.timeSeparator}
                    ></Text>
                    <Text
                        style={[
                            styles.timeUnit,
                            styles.secondUnit,
                        ]}
                    >
                        {formatTime(timeUnits.seconds)}
                    </Text>
                    <Text
                        style={styles.timeSeparator}
                    ></Text>
                </View>
                <Text style={styles.timetitle}>
                    Years Days Hours Minutes Seconds
                </Text>
                <View style={styles.buttonContainer}>
                    <Button
                        title="Start Timer"
                        onPress={handleStartTimer}
                        style={styles.button}
                    />
                    <Button
                        title="Reset Timer"
                        onPress={handleResetTimer}
                        style={[
                            styles.button,
                            styles.resetButton,
                        ]}
                    />
                </View>

                <DateTimePickerModal
                    isVisible={isDatePickerVisible}
                    mode="datetime"
                    onConfirm={handleDateConfirm}
                    onCancel={handleDateCancel}
                />
            </View>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#f0f0f0",
    },
    title: {
        fontSize: 30,
        fontWeight: "bold",
        paddingVertical: 20,
        color: "green",
    },
    subtitle: {
        marginBottom: 20,
        fontSize: 18,
    },
    timer: {
        flexDirection: "row",
        alignItems: "center",
    },
    timeUnit: {
        fontSize: 24,
        fontWeight: "bold",
        paddingHorizontal: 10,
        paddingVertical: 5,
    },
    yearUnit: {
        backgroundColor: "red",
        borderRadius: 15,
        color: "white",
    },
    dayUnit: {
        backgroundColor: "#3498db",
        borderRadius: 15,
        color: "white",
    },
    hourUnit: {
        backgroundColor: "#27ae60",
        borderRadius: 15,
        color: "white",
    },
    minuteUnit: {
        backgroundColor: "#f39c12",
        borderRadius: 15,
        color: "white",
    },
    secondUnit: {
        backgroundColor: "#9b59b6",
        borderRadius: 15,
        color: "white",
    },
    timeSeparator: {
        fontSize: 24,
        fontWeight: "bold",
        marginHorizontal: 5,
    },
    timetitle: {
        fontSize: 17,
        padding: 10,
        paddingRight: 19,
        fontWeight: "bold",
    },
});

export default App;

Step 3: To run the react native application, open the Terminal and enter the command listed below.

npx expo start

• To run on Android:

npx react-native run-android

• To run on Ios:

npx react-native run-ios

Output: