resend OTP - done

src/screens/AuthScreen/VerifyOTP/index.js

@@ -1,7 +1,6 @@
-import React, { useRef, useState } from 'react';
-import { View, Text, Image, Alert } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import { View, Text, Image, Alert, TouchableOpacity } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useDispatch } from 'react-redux';
 import { OtpInput } from "react-native-otp-entry";
 import CustomButton from '../../../components/CustomButton';
@@ -9,12 +8,34 @@ import Background from '../../../components/Background';
 import IMAGES from '../../../constants/Images';
 import { GlobalTheme } from '../../../theme';
 import { styles } from './style';
-import { toastError } from '../../../constants/Toast';
+import { toastError, toastSuccess } from '../../../constants/Toast';
 
 const VerifyOTP = ({ navigation }) => {
   const [loading, setLoading] = useState(false);
   const dispatch = useDispatch();
   const [otp, setOTP] = useState('');
+  const [timer, setTimer] = useState(300); // 5 minutes = 300 seconds
+  const [showResend, setShowResend] = useState(false);
+
+  // Countdown effect
+  useEffect(() => {
+    if (timer === 0) {
+      setShowResend(true);
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setTimer(prev => prev - 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [timer]);
+
+  const formatTime = (secs) => {
+    const minutes = Math.floor(secs / 60);
+    const seconds = secs % 60;
+    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+  };
 
   const handle_validate = () => {
     toastError('Alert', "Please enter 6 digit PIN");
@@ -24,6 +45,13 @@ const VerifyOTP = ({ navigation }) => {
     }
   }
 
+  const resend_OTP = () => {
+    setTimer(300); 
+    setShowResend(false);
+    toastSuccess('Resend OTP Successfully.')
+    
+  }
+
   return (
     <Background barcolor="light-content">
       <KeyboardAwareScrollView style={styles.container} contentContainerStyle={{ justifyContent: 'center', flex: 1 }}>
@@ -76,6 +104,18 @@ const VerifyOTP = ({ navigation }) => {
         <View style={{ marginTop: 100 }}>
           <CustomButton onPress={handle_validate} title={'Verify'} style={styles.btnbg} textstyle={styles.btntext} />
         </View>
+
+        <View style={{ alignItems: 'center', marginTop: 20 }}>
+          {!showResend ? (
+            <Text style={{ color: GlobalTheme.colors.darkGray }}>Resend OTP in {formatTime(timer)}</Text>
+          ) : (
+            <TouchableOpacity onPress={resend_OTP}>
+              <Text style={styles.resendOTP} >
+                Resend OTP
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
       </KeyboardAwareScrollView>
     </Background>
   );

src/screens/AuthScreen/VerifyOTP/style.js

@@ -81,5 +81,21 @@ export const styles = StyleSheet.create({
         color: '#aaa',
         fontSize: 18,
     },
+    resendText: {
+        color: GlobalTheme.colors.primary,
+        fontWeight: 'bold',
+        fontSize: 14,
+        marginTop: 20,
+        textAlign: 'center',
+    },
+    timerText: {
+        color: 'gray',
+        fontSize: 14,
+        marginTop: 20,
+        textAlign: 'center',
+    },
+    resendOTP:{
+        color: GlobalTheme.colors.secondary, fontWeight: GlobalTheme.typography.fontWeight.medium , fontSize : GlobalTheme.typography.fontSize.small
+    }
 
 });