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.
//App.js import React from 'react' ;
import AlarmClock from './AlarmClock' ;
export default App = () => {
return (
<>
<AlarmClock />
</>
)
} |
//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