OTP Timer in React Native | No External Package

Almost every application will have a sign up page which may or may not perform email or phone number verification done by using an OTP (One Time Password). I had to make one for my startup. Even though it is obvious that there will be some external package or module to make this, but I decided to do it on my own.

Here in this article I will show step by step how to implement such a timer in react.

1. Setting up the Project:

This project will be managed using the Expo CLI.

npx create-expo-app OTPApp --template blank

2. Creating the Timer Component

Create a new file OTPTimer.js for your OTP timer component. Import useState, useRef, useEffect from react. Import other necessary basic components like Text, View, etc.

We are also going to use a prop timeInSeconds to decide how long the countdown should run.

import { useRef, useState,useEffect } from "react";
import { Text } from "react-native";

const TimerComponent=({timeInSeconds})=>{  

 return (
<Text style={{color:'grey', margin:10, textAlign:'center'}}></Text>
)

}

3. Create State

We create a state called time which would be initiated with the prop timeInSeconds. It will also be used under the Text Component.

const TimerComponent=({timeInSeconds})=>{  

 const [time,setTime]=useState(timeInSeconds) 

 return (
<Text style={{color:'grey', margin:10, textAlign:'center'}}>{time}</Text>
)

}

4. Logic for Countdown

The logic for countdown is that every 1 second we will decrement the state time which will then be rendered on the component. Now to perform this task we will take advantage of the setInterval function. We set an interval 1000 ms, after which we will perform the decrement.

Once the value of the time state reaches <=0 then we will call clearInterval(IntervalID) to remove the setInterval function.

 function countDown(){
        setTime(prev=> prev-1)

        console.log(time)
        if(time<=0){
            clearInterval(IntervalID)
        }
    }

    const IntervalID=setInterval(countDown,1000)

But this is not going to be enough. In pure javascript this would have worked but not in react. The reason being that time value inside the countDown function is stale, meaning it's not using the most up-to-date state value due to how closures and setInterval work in React.

In the countDown function, the time variable is referencing the value it had when setInterval was initially set. Even though setTime updates the state, the next setInterval call doesn't have access to the updated state value.

Hence we take the help of useRef and useEffect.

5. useRef and useEffect

    const intervalRef=useRef(null)

    useEffect(() => {
        intervalRef.current = setInterval(() => {
            setTimer(prev => {
                if (prev <= 1) {
                    clearInterval(intervalRef.current);
                    return 0;
                }
                return prev - 1;
            });
        }, 1000);

        // Cleanup interval on component unmount
        return () => {
            clearInterval(intervalRef.current);
        }
    }, []);

We use useRef to store the interval ID so that it's preserved across renders and can be cleared when needed.

We also clear the interval when time reaches 0 or if the component unmounts.

6. Printing format

I used the below function so that the timer is shown in MM:SS format which is more readable.

    function convertSecondsToMMSS(seconds) {
        const minutes = Math.floor(seconds / 60);
        const remainingSeconds = seconds % 60;

        const formattedMinutes = minutes.toString().padStart(2, '0');
        const formattedSeconds = remainingSeconds.toString().padStart(2, '0');

        return `${formattedMinutes}:${formattedSeconds}`;
    }

7. Complete component code

Here is the complete code for your reference.

import { useRef, useState,useEffect } from "react";
import { Text } from "react-native";

const TimerComponent=({timeInSeconds,expireCallback})=>{  //expireCallback is a function called when timer ends

    const [timer,setTimer]=useState(timeInSeconds)

    const intervalRef=useRef(null)

    useEffect(() => {
        intervalRef.current = setInterval(() => {
            setTimer(prev => {
                if (prev <= 1) {
                    clearInterval(intervalRef.current);
                    return 0;
                }
                return prev - 1;
            });
        }, 1000);

        // Cleanup interval on component unmount
        return () => {
            clearInterval(intervalRef.current);
            if (typeof expireCallback === 'function') {
                expireCallback();
            } else {
                console.log('Callback is undefined or not a function');
            }
        }
    }, []);


    function convertSecondsToMMSS(seconds) {
        const minutes = Math.floor(seconds / 60);
        const remainingSeconds = seconds % 60;

        const formattedMinutes = minutes.toString().padStart(2, '0');
        const formattedSeconds = remainingSeconds.toString().padStart(2, '0');

        return `${formattedMinutes}:${formattedSeconds}`;
    }


    return(
        <Text style={{color:'grey', margin:10, textAlign:'center'}}>{convertSecondsToMMSS(timer)}</Text>
    )

}

export default TimerComponent