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 ( ) } ``` ##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 ( {time} ) } ``` ## 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( {convertSecondsToMMSS(timer)} ) } export default TimerComponent ```

ayushman_singh_97ed21fcd3

OTP Timer in React Native | No External Package

Join Our Newsletter. No Spam, Only the good stuff.