Add counter logic to Account Verification screen

src/screens/accountVerification/index.tsx

@@ -25,8 +25,19 @@ function AccountVerificationScreen() {
   const navigation = useNavigation<AccountVerificationScreenNavigationProp>();
 
   const [otp, setOtp] = useState(Array(6).fill(''));
+  const [counter, setCounter] = useState(10);
   const inputRefs = useRef<TextInput[]>([]);
 
+  useEffect(() => {
+    if (counter > 0) {
+      const timer = setTimeout(() => {
+        setCounter(counter - 1);
+      }, 1000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [counter]);
+
   const handleChange = (text: string, index: number) => {
     const newOtp = [...otp];
     newOtp[index] = text;
@@ -87,10 +98,22 @@ function AccountVerificationScreen() {
           ))}
         </View>
         <Text style={styles.OTPTimeText}>
-          Kirim ulang kode OTP dalam 10 detik
+          Kirim ulang kode OTP dalam <Text>{counter}</Text> detik
         </Text>
       </View>
-      <Text style={styles.sendOTPText}>Kirim Ulang Kode OTP</Text>
+      <Pressable
+        disabled={counter !== 0 ? true : false}
+        onPress={() => setCounter(10)}
+        style={({pressed}) => ({
+          transform: [{scale: pressed ? 0.95 : 1}],
+        })}>
+        <Text
+          style={
+            counter !== 0 ? styles.sendOTPTextDisabled : styles.sendOTPText
+          }>
+          Kirim Ulang Kode OTP
+        </Text>
+      </Pressable>
       <Button
         mode="contained"
         style={styles.accountVerificationButton}

src/screens/accountVerification/styles.tsx

@@ -46,6 +46,14 @@ const styles = StyleSheet.create({
     ...FontFamily.notoSansSemiBold,
     fontSize: 12,
   },
+  sendOTPTextDisabled: {
+    marginTop: 40,
+    marginHorizontal: 16,
+    textAlign: 'center',
+    color: Colors.neutral70.color,
+    ...FontFamily.notoSansSemiBold,
+    fontSize: 12,
+  },
   accountVerificationButton: {
     marginHorizontal: 16,
     marginTop: 16,