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:
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