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:
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
// 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; |
Javascript
// 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: