Open In App

Create Timer Based Phone Silencer App using React-Native

Last Updated : 14 Jan, 2024
Like Article

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.


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) {
                    Alert.alert("Phone is silenced now");
                return prevTimer > 0 ? prevTimer - 1 : 0;
        }, 1000);
        return () => clearInterval(intervalId);
    }, []);
    return (
                flex: 1,
                justifyContent: "center",
                alignItems: "center",
                    fontSize: 24,
                {timer} seconds
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



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads