latest

src/screens/OtpVarificationScreen.tsx

@@ -16,6 +16,7 @@ import * as Keychain from 'react-native-keychain';
 import { RootStackParamList } from '../navigation/AppNavigator';
 import { useTheme } from '../hooks/ui/useTheme';
 import { useCreate } from '../hooks/core/useCreate';
+import { useFetch } from '../hooks/core/useFetch';
 import { LOGIN_URL, VARIFY_OTP_URL } from '../utils/ApiUrls';
 import { getFcmToken } from '../utils/firebase/firebaseServices';
 import { CustomButton } from '../components/common/Custom';
@@ -57,7 +58,7 @@ export default function OtpVerificationScreen() {
     }, 1000);
 
     return () => clearInterval(interval);
-  }, []);
+  }, [fadeAnim, slideAnim]);
 
   const { mutate: verifyOtp, isPending: verifying } = useCreate<any, any>(VARIFY_OTP_URL, {
     onSuccess: async (res) => {
@@ -84,17 +85,31 @@ export default function OtpVerificationScreen() {
     },
   });
 
-  const { mutate: resendOtp, isPending: resending } = useCreate<any, any>(LOGIN_URL, {
-    onSuccess: () => {
-      setTimer(30);
-      setCode(Array(CELL_COUNT).fill(''));
-      inputs.current[0]?.focus();
-      ToastAndroid.show('OTP Resent', ToastAndroid.SHORT);
-    },
-    onError: () => {
-      ToastAndroid.show('Failed to resend OTP', ToastAndroid.SHORT);
-    },
-  });
+  const { refetch: resendOtp, isFetching: resending } = useFetch<any>(
+    LOGIN_URL + mobile,
+    {},
+    {
+      enabled: false,
+      retry: false,
+    }
+  );
+
+  const handleResendOtp = async () => {
+    try {
+      const { data } = await resendOtp();
+
+      if (data?.statusCode === 200) {
+        setTimer(30);
+        setCode(Array(CELL_COUNT).fill(''));
+        inputs.current[0]?.focus();
+        ToastAndroid.show('OTP Resent', ToastAndroid.SHORT);
+      } else {
+        ToastAndroid.show(data?.message || 'Failed to send OTP. Please try again.', ToastAndroid.SHORT);
+      }
+    } catch {
+      ToastAndroid.show('Something went wrong. Please check your connection.', ToastAndroid.SHORT);
+    }
+  };
 
   const handleTextChange = (text: string, index: number) => {
     // If text length > 1, it's likely a paste operation
@@ -159,7 +174,7 @@ export default function OtpVerificationScreen() {
             <Text style={[styles.title, { color: theme.colors.textPrimary }]}>Verification</Text>
             <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
               Enter the 6-digit code sent to {'\n'}
-              <Text style={{ color: theme.colors.textPrimary, fontWeight: '700' }}>+91 {mobile}</Text>
+              <Text style={[styles.emphasisText, { color: theme.colors.textPrimary }]}>{mobile}</Text>
             </Text>
           </View>
 
@@ -200,10 +215,10 @@ export default function OtpVerificationScreen() {
             <View style={styles.resendContainer}>
               {timer > 0 ? (
                 <Text style={[styles.timerText, { color: theme.colors.textMuted }]}>
-                  Resend code in <Text style={{ fontWeight: '700' }}>00:{timer.toString().padStart(2, '0')}</Text>
+                  Resend code in <Text style={styles.emphasisText}>00:{timer.toString().padStart(2, '0')}</Text>
                 </Text>
               ) : (
-                <TouchableOpacity onPress={() => resendOtp({ params: { mobile } })} disabled={resending}>
+                <TouchableOpacity onPress={handleResendOtp} disabled={resending}>
                   <Text style={[styles.resendText, { color: theme.colors.primary }]}>
                     {resending ? 'Sending...' : 'Resend Code'}
                   </Text>
@@ -276,4 +291,7 @@ const styles = StyleSheet.create({
     fontFamily: FontsFamily.nunitoBold,
     textDecorationLine: 'underline',
   },
+  emphasisText: {
+    fontWeight: '700',
+  },
 });