Create Timer Based Phone Silencer App using React-Native
Last Updated :
14 Jan, 2024
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:
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:
Javascript
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;
|
Javascript
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:
Share your thoughts in the comments
Please Login to comment...