Create an Alarm Clock using React-Native

React Native is a popular JavaScript framework for building cross-platform mobile applications which binds with a lot for features that helps you to create versatile and industry level application. In this article we will see step by step process to create an Alarm Clock using React-Native.

Preview of final output: Let us have a look at how the final output will look like.

Prerequisites:

• Node JS
• npm (Node Package Manager)
• React Native

Approach to create Alarm Clock:

• First we will create a simple user interface to show the current time.
• By using the useState we will manage the current timings and Alarm time which will be set by the user.
• We will continuously checking the Alarm time by using the setTimeOut method.
• We will trigger an alert when the time completes.

Steps to Create the Project:

Step 1: Initialize React Native Project:

npx react-native init AlarmClock
cd AlarmClock

Step 2: Install Dependencies:

npm install @react-native-community/datetimepicker react-native-vector-icons

Folder Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "@react-native-community/datetimepicker": "^7.6.2",
    "react": "18.2.0",
    "react-native": "0.73.2",
    "react-native-vector-icons": "^10.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.19",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.3",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  }

Example: Create the required files and add the below codes.

Javascript

//App.js

import React from 'react';
import AlarmClock from './AlarmClock';
export default App = () => {
    return (
        <>
            <AlarmClock />
        </>
    )
}

Javascript

//AlarmClock.js

import React, { useState, useEffect } from "react";
import { View, Text, Button, StyleSheet, Platform, Alert } from "react-native";
import DateTimePicker from "@react-native-community/datetimepicker";

const AlarmClock = () => {
    const [alarmTime, setAlarmTime] = useState(new Date());
    const [showTimePicker, setShowTimePicker] = useState(false);

    const showTimePickerModal = () => {
        setShowTimePicker(true);
    };

    const hideTimePickerModal = () => {
        setShowTimePicker(false);
    };

    const handleTimeChange = (event, selectedTime) => {
        hideTimePickerModal();
        if (selectedTime) {
            setAlarmTime(selectedTime);
        }
    };

    useEffect(() => {
        const checkAlarm = setInterval(() => {
            const currentTime = new Date();
            if (
                currentTime.getHours() === alarmTime.getHours() &&
                currentTime.getMinutes() === alarmTime.getMinutes()
            ) {
                // Matched the set alarm time, show an alert
                Alert.alert("Alarm", "It is time!");
                // Stop checking once the alert is shown
                clearInterval(checkAlarm);
            }
        }, 1000); // Check every second
        // Cleanup on component unmount
        return () => clearInterval(checkAlarm);
    }, [alarmTime]);

    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.appName}>AlarmClock</Text>
            </View>

            <View style={styles.clockContainer}>
                <Text style={styles.clockText}>
                    {alarmTime.toLocaleTimeString([], {
                        hour: "2-digit",
                        minute: "2-digit",
                    })}
                </Text>
            </View>

            {showTimePicker && (
                <DateTimePicker
                    value={alarmTime}
                    mode="time"
                    is24Hour={true}
                    display="spinner"
                    onChange={handleTimeChange}
                />
            )}

            <Button
                title="Set Alarm"
                onPress={showTimePickerModal}
                color="#3498db"
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#ecf0f1", // Set your desired background color
    },
    header: {
        marginBottom: 20,
    },
    appName: {
        fontSize: 28,
        fontWeight: "bold",
        color: "#2c3e50", // Set your desired text color
    },
    clockContainer: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: 20,
    },
    clockText: {
        fontSize: 50,
        marginRight: 10,
        color: "#2c3e50", // Set your desired text color
    },
    footerText: {
        marginTop: 20,
        fontSize: 16,
        color: "#7f8c8d", // Set your desired text color
    },
});

export default AlarmClock;

Steps to Run the Application:

Run the app on an Android emulator:

npx react-native run-android

OR

npx react-native run-ios

Output: