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:

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: