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 of features that help you to create versatile and industry-level applications. In this article, we will see the 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.

👁 Screenshot-2024-01-15-144853

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.

Steps to Run the Application:

Run the app on an Android emulator:

npx react-native run-android

OR

npx react-native run-ios

Output: