Create Timer Based Phone Silencer App using React-Native

In this project, we will create a mobile application using React Native that acts as a timer-based phone silencer. The app allows users to set a timer, and when the timer finishes, it automatically silences the phone. A notification will be displayed to inform the user that the phone is now silenced.

Prerequisite:

• React Native
• React Native Components
• Node.js and npm
• React Native State
• React Native Props

Approach to create Timer Based Phone Silencer App:

• The app consists of a timer component (Timer.js) that allows users to start, reset, and finish the timer.
• The main app (App.js) integrates the timer component and includes logic to play a sound and display an alert when the timer finishes.
• The react-native-sound library is used for audio playback, and the react-native-community/datetimepicker library is used for setting the timer.

Steps to Create the Project:

Step 1: Create a react-native application using the following command:

npx react-native@latest init AwesomeProject

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

cd AwesomeProject

Step 3:Install the dependencies using following command:

npm install @react-native-community/datetimepicker react-native-linear-gradient react-native-sound

Step 4: Create Timer.js files and copy the provided code into these files.

• Timer Tracking: Manages the timer's seconds and running state using the useState hook.
• Automatic Timer Updates: Uses the useEffect hook to update the timer every second when it is running.
• Visual Feedback: Displays the current timer value in a view for users to monitor.

Project Structure:

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

"dependencies": {
    "react-native-paper": "4.9.2",
    "@expo/vector-icons": "^13.0.0"
}

Example: Update the code inside App.js to include TimerSilencer component:

// src/Timer.js
import React, { useState, useEffect } from "react";
import { View, Text, Alert } from "react-native";

const Timer = ({ navigation }) => {
	const [timer, setTimer] = useState(10);

	useEffect(() => {
		const intervalId = setInterval(() => {
			setTimer((prevTimer) => {
				if (prevTimer === 0) {
					clearInterval(intervalId);
					Alert.alert("Phone is silenced now");
				}
				return prevTimer > 0 ? prevTimer - 1 : 0;
			});
		}, 1000);

		return () => clearInterval(intervalId);
	}, []);

	return (
		<View
			style={{
				flex: 1,
				justifyContent: "center",
				alignItems: "center",
			}}
		>
			<Text
				style={{
					fontSize: 24,
				}}
			>
				{timer} seconds
			</Text>
		</View>
	);
};

export default Timer;

// App.js
import React from 'react';
import TimerScreen from './Timer';
const App = () => {
	return (
		<TimerScreen />
	);
};

export default App;

Open Android/app/src/main/AndroidManifest.xml and add the following code to allow the app to modify audio setiings:

<uses-permission android:name="android.permission.RECORD_AUDIO" />

Step 7: Run the app using following command:

npm start

Output: