Update VerificationScreen to use react-native-confirmation-code-field for enhanced OTP input; add bundleIdentifier in app.json and include new dependency in package.json and package-lock.json.

src/screens/Auth/VerificationScreen.js

@@ -16,15 +16,27 @@ import { StatusBar } from 'expo-status-bar';
 import { useFocusEffect } from '@react-navigation/native';
 import { useAuth } from '../../contexts/AuthContext';
 import Button from '../../components/Button';
-import Input from '../../components/Input';
+import {
+  CodeField,
+  Cursor,
+  useBlurOnFulfill,
+  useClearByFocusCell,
+} from 'react-native-confirmation-code-field';
 import { COLORS } from '../../constants/colors';
 
+const CELL_COUNT = 6;
+
 const VerificationScreen = ({ navigation }) => {
   const [code, setCode] = useState('');
   const [countdown, setCountdown] = useState(60);
   const [canResend, setCanResend] = useState(false);
   const { verify, isLoading, pendingVerification, clearPendingVerification } = useAuth();
   const countdownRef = useRef(null);
+  const ref = useBlurOnFulfill({ value: code, cellCount: CELL_COUNT });
+  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
+    value: code,
+    setValue: setCode,
+  });
 
   useEffect(() => {
     if (!pendingVerification) {
@@ -74,18 +86,18 @@ const VerificationScreen = ({ navigation }) => {
     }, 1000);
   };
 
-  const handleVerify = async () => {
-    if (!code.trim()) {
+  const handleVerify = async (filledCode) => {
+    if (!filledCode.trim()) {
       Alert.alert('Ýalňyşlyk', 'Tassyklama koduny giriziň');
       return;
     }
 
-    if (!/^\d{6}$/.test(code.trim())) {
+    if (!/^\d{6}$/.test(filledCode.trim())) {
       Alert.alert('Ýalňyşlyk', 'Tassyklama kody 6 sanly bolmaly');
       return;
     }
 
-    const result = await verify(code.trim());
+    const result = await verify(filledCode.trim());
     
     if (result.success) {
       // Navigation will be handled by AuthContext
@@ -94,6 +106,8 @@ const VerificationScreen = ({ navigation }) => {
     }
   };
 
+  const handleVerifyWrapper = () => handleVerify(code);
+
   const handleResendCode = async () => {
     if (!canResend) return;
     
@@ -153,24 +167,29 @@ const VerificationScreen = ({ navigation }) => {
             </View>
 
             <View style={styles.formContainer}>
-              <Input
-                label="Tassyklama kody"
+              <CodeField
+                ref={ref}
+                {...props}
                 value={code}
                 onChangeText={setCode}
-                placeholder="123456"
-                keyboardType="numeric"
-                maxLength={6}
-                style={styles.codeInput}
-                textAlign="center"
-                returnKeyType="done"
-                onSubmitEditing={handleVerify}
+                cellCount={CELL_COUNT}
+                rootStyle={styles.otpContainer}
+                keyboardType="number-pad"
                 textContentType="oneTimeCode"
-                autoComplete="sms-otp"
+                renderCell={({ index, symbol, isFocused }) => (
+                  <Text
+                    key={index}
+                    style={[styles.otpInput, isFocused && styles.otpInputHighlight]}
+                    onLayout={getCellOnLayoutHandler(index)}>
+                    {symbol || (isFocused ? <Cursor/> : null)}
+                  </Text>
+                )}
+                onSubmitEditing={handleVerifyWrapper}
               />
 
               <Button
                 title="Tassykla"
-                onPress={handleVerify}
+                onPress={handleVerifyWrapper}
                 loading={isLoading}
                 style={styles.verifyButton}
               />
@@ -259,10 +278,25 @@ const styles = StyleSheet.create({
   formContainer: {
     alignItems: 'center',
   },
-  codeInput: {
-    width: '100%',
+  otpContainer: {
+    width: '90%',
     marginBottom: 32,
   },
+  otpInput: {
+    width: 45,
+    height: 60,
+    lineHeight: 58,
+    borderWidth: 1,
+    borderRadius: 12,
+    borderColor: COLORS.gray[300],
+    color: COLORS.textPrimary,
+    fontSize: 24,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  otpInputHighlight: {
+    borderColor: COLORS.primary,
+  },
   verifyButton: {
     width: '100%',
     marginBottom: 32,