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.

app.json

@@ -16,7 +16,8 @@
       "supportsTablet": true,
       "statusBar": {
         "barStyle": "dark-content"
-      }
+      },
+      "bundleIdentifier": "com.nurmuhammet.ali.tbbankonline"
     },
     "android": {
       "adaptiveIcon": {

package-lock.json

@@ -23,6 +23,7 @@
         "expo-system-ui": "~5.0.11",
         "react": "19.0.0",
         "react-native": "0.79.5",
+        "react-native-confirmation-code-field": "^8.0.1",
         "react-native-gesture-handler": "~2.24.0",
         "react-native-modal-datetime-picker": "^15.0.1",
         "react-native-safe-area-context": "5.4.0",
@@ -6733,6 +6734,23 @@
         }
       }
     },
+    "node_modules/react-native-confirmation-code-field": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-confirmation-code-field/-/react-native-confirmation-code-field-8.0.1.tgz",
+      "integrity": "sha512-pwrhQtspFEp0y/gxZRp8hrra+UjAYfwAsW5Sn3yYtdUZVyRjAZPBnUb3rOc+z5L5o2ml03z5P3uvTK0yQwXsmA==",
+      "peerDependencies": {
+        "react": ">=16.4.0",
+        "react-native": ">=0.64.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-native-edge-to-edge": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/react-native-edge-to-edge/-/react-native-edge-to-edge-1.6.0.tgz",

package.json

@@ -21,15 +21,16 @@
     "expo-image-picker": "~16.1.4",
     "expo-splash-screen": "^31.0.8",
     "expo-status-bar": "~2.2.3",
+    "expo-system-ui": "~5.0.11",
     "react": "19.0.0",
     "react-native": "0.79.5",
+    "react-native-confirmation-code-field": "^8.0.1",
     "react-native-gesture-handler": "~2.24.0",
     "react-native-modal-datetime-picker": "^15.0.1",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "^4.11.1",
     "react-native-svg": "15.11.2",
-    "react-native-webview": "13.13.5",
+    "react-native-webview": "13.13.5"
-    "expo-system-ui": "~5.0.11"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

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 () => {
+  const handleVerify = async (filledCode) => {
-    if (!code.trim()) {
+    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
+              <CodeField
-                label="Tassyklama kody"
+                ref={ref}
+                {...props}
                 value={code}
                 onChangeText={setCode}
-                placeholder="123456"
+                cellCount={CELL_COUNT}
-                keyboardType="numeric"
+                rootStyle={styles.otpContainer}
-                maxLength={6}
+                keyboardType="number-pad"
-                style={styles.codeInput}
-                textAlign="center"
-                returnKeyType="done"
-                onSubmitEditing={handleVerify}
                 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: {
+  otpContainer: {
-    width: '100%',
+    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,