updated OTP screen

Author: harmanbatheja15

apps/mobile/src/components/OtpInput.tsx

@@ -0,0 +1,79 @@
+import { useRef } from 'react';
+import {
+  View,
+  TextInput,
+  NativeSyntheticEvent,
+  TextInputKeyPressEventData,
+  Keyboard,
+} from 'react-native';
+
+type OtpInputProps = {
+  length: number;
+  value: Array<string>;
+  disabled: boolean;
+  onChange: (value: Array<string>) => void;
+};
+
+const OtpInput = ({ length, value, disabled, onChange }: OtpInputProps) => {
+  const inputRefs = useRef<Array<TextInput | null>>([]);
+
+  const onChangeValue = (text: string, index: number) => {
+    const newValue = value.map((item, valueIndex) => {
+      if (valueIndex === index) {
+        return text;
+      }
+      return item;
+    });
+    onChange(newValue);
+  };
+
+  const handleChange = (text: string, index: number) => {
+    onChangeValue(text, index);
+
+    if (text.length !== 0) {
+      if (index === length - 1) {
+        Keyboard.dismiss();
+      } else {
+        inputRefs.current[index + 1]?.focus();
+      }
+    } else {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+
+  const handleBackspace = (
+    e: NativeSyntheticEvent<TextInputKeyPressEventData>,
+    index: number,
+  ) => {
+    const { nativeEvent } = e;
+    if (nativeEvent.key === 'Backspace') {
+      handleChange('', index);
+    }
+  };
+
+  return (
+    <View className="w-full flex flex-row justify-between items-center">
+      {[...new Array(length)].map((_, index) => (
+        <TextInput
+          ref={ref => {
+            if (ref && !inputRefs.current.includes(ref)) {
+              inputRefs.current = [...inputRefs.current, ref];
+            }
+          }}
+          keyboardType="decimal-pad"
+          key={index}
+          maxLength={1}
+          contextMenuHidden
+          selectTextOnFocus
+          editable={!disabled}
+          testID={`OTPInput-${index}`}
+          onChangeText={text => handleChange(text, index)}
+          className="w-16 h-14 bg-[#262626] border border-[#F8D48D40] focus:border-[#F8D48D] rounded-lg text-[#FFF] text-xl text-center font-medium"
+          onKeyPress={e => handleBackspace(e, index)}
+        />
+      ))}
+    </View>
+  );
+};
+
+export default OtpInput;

apps/mobile/src/screens/Otp.tsx

@@ -1,14 +1,26 @@
-import { View, Text, TouchableOpacity, Image, TextInput } from 'react-native';
+import { useState } from 'react';
+import { View, Text, TouchableOpacity, Image } from 'react-native';
 import Gradient from '../assets/gradient.png';
 import OtpImage from '../assets/otp.png';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../navigation/navigator.types';
 import IonIcon from 'react-native-vector-icons/Ionicons';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
+import OtpInput from '../components/OtpInput';
 
 type OtpProps = NativeStackScreenProps<RootStackParamList, 'Otp'>;
 
 const Otp = ({ navigation }: OtpProps) => {
+  const [otpValue, setOtpValue] = useState<Array<string>>(['', '', '', '']);
+  const [isBtnDisabled, setIsBtnDisabled] = useState(true);
+
+  const handleOtpChange = (value: Array<string>) => {
+    setOtpValue(value);
+
+    const allFilled = value.every(v => v.length > 0);
+    setIsBtnDisabled(!allFilled);
+  };
+
   return (
     <KeyboardAwareScrollView
       bottomOffset={100}
@@ -36,17 +48,26 @@ const Otp = ({ navigation }: OtpProps) => {
           <Text className="text-[#A3A3A3] text-center text-2xl font-medium mb-6 underline">
             RESEND?
           </Text>
-          <TextInput
+          {/* <TextInput
             keyboardType="numeric"
             placeholder="OTP"
             placeholderTextColor={'#fff'}
             // autoFocus={true}
             className="w-full bg-[#262626] p-3 border border-[#F8D48D40] focus:border-[#F8D48D] rounded-lg text-[#FFF] text-base"
+          /> */}
+          <OtpInput
+            length={4}
+            value={otpValue}
+            disabled={false}
+            onChange={handleOtpChange}
           />
           <TouchableOpacity
             activeOpacity={0.8}
             onPress={() => navigation.navigate('Name')}
-            className="bg-[#EDEAE2] rounded-lg py-3 mt-8"
+            className={`bg-[#EDEAE2] rounded-lg py-3 mt-8 ${
+              isBtnDisabled ? 'opacity-60' : ''
+            }`}
+            disabled={isBtnDisabled}
           >
             <Text className="text-center text-[#0A0A0A] font-semibold text-base">
               Next