1// isResendEnable is just my custom variable to check if i have enabled
2// resend function in my otp box
3 const [timerCount, setTimer] = useState(20);
4 const [activator, setActivator] = useState(Math.random());
5 useEffect(() => {
6 let interval;
7 if (isResendEnable) {
8 interval = setInterval(() => {
9 if (timerCount > 0) {
10 setTimer(lastTimerCount => {
11 lastTimerCount <= 1 && clearInterval(interval);
12 return lastTimerCount - 1;
13 });
14 }
15 }, 1000);
16 }
17
18 return () => {
19 if (isResendEnable) {
20 clearInterval(interval);
21 }
22 };
23 }, [activator]);
24
25 return <Text> Resend in {timerCount} sec </Text>
1import 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 /> )}