// isResendEnable is just my custom variable to check if i have enabled
// resend function in my otp box
const [timerCount, setTimer] = useState(20);
const [activator, setActivator] = useState(Math.random());
useEffect(() => {
let interval;
if (isResendEnable) {
interval = setInterval(() => {
if (timerCount > 0) {
setTimer(lastTimerCount => {
lastTimerCount <= 1 && clearInterval(interval);
return lastTimerCount - 1;
});
}
}, 1000);
}
return () => {
if (isResendEnable) {
clearInterval(interval);
}
};
}, [activator]);
return <Text> Resend in {timerCount} sec </Text>
import CountDown from 'react-native-countdown-component'; render() { return ( <CountDown size={30} until={1000} onFinish={() => alert('Finished')} digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}} digitTxtStyle={{color: '#1CC625'}} timeLabelStyle={{color: 'red', fontWeight: 'bold'}} separatorStyle={{color: '#1CC625'}} timeToShow={['H', 'M', 'S']} timeLabels={{m: null, s: null}} showSeparator /> )}