amazing design

src/components/Input.js

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState, forwardRef } from 'react';
 import { View, TextInput, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { COLORS } from '../constants/colors';
 
-const Input = ({
+const Input = forwardRef(({
   label,
   value,
   onChangeText,
@@ -17,7 +17,7 @@ const Input = ({
   returnKeyType = 'done',
   onSubmitEditing,
   ...props
-}) => {
+}, ref) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
 
@@ -40,6 +40,7 @@ const Input = ({
           </View>
         )}
         <TextInput
+          ref={ref}
           style={[styles.input, leftIcon && styles.inputWithLeftIcon]}
           value={value}
           onChangeText={onChangeText}
@@ -70,7 +71,7 @@ const Input = ({
       {error && <Text style={styles.errorText}>{error}</Text>}
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   container: {

src/navigation/AuthNavigator.js

@@ -15,6 +15,7 @@ const AuthNavigator = () => {
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
+        gestureEnabled: true,
         cardStyleInterpolator: ({ current, layouts }) => {
           return {
             cardStyle: {
@@ -30,7 +31,7 @@ const AuthNavigator = () => {
           };
         },
       }}
-      initialRouteName={pendingVerification ? 'Verification' : 'Login'}
+      initialRouteName={pendingVerification?.phone ? 'Verification' : 'Login'}
     >
       <Stack.Screen name="Login" component={LoginScreen} />
       <Stack.Screen name="Register" component={RegisterScreen} />

src/screens/Auth/LoginScreen.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import {
   View,
   Text,
@@ -24,6 +24,7 @@ const LoginScreen = ({ navigation }) => {
   const [password, setPassword] = useState('');
   const [errors, setErrors] = useState({});
   const { login, isLoading } = useAuth();
+  const passwordInputRef = useRef(null);
 
   const validateForm = () => {
     const newErrors = {};
@@ -76,6 +77,8 @@ const LoginScreen = ({ navigation }) => {
           showsVerticalScrollIndicator={false}
           keyboardShouldPersistTaps="handled"
         >
+          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            <View style={styles.content}>
               <View style={styles.logoContainer}>
                 <Logo width={100} height={100} />
                 <Text style={styles.appName}>TBBANK ONLINE</Text>
@@ -97,9 +100,12 @@ const LoginScreen = ({ navigation }) => {
                   leftIcon="call"
                   error={errors.phone}
                   maxLength={8}
+                  returnKeyType="next"
+                  onSubmitEditing={() => passwordInputRef.current?.focus()}
                 />
 
                 <Input
+                  ref={passwordInputRef}
                   label="Parol"
                   value={password}
                   onChangeText={setPassword}
@@ -107,6 +113,8 @@ const LoginScreen = ({ navigation }) => {
                   secureTextEntry
                   leftIcon="lock-closed"
                   error={errors.password}
+                  returnKeyType="done"
+                  onSubmitEditing={handleLogin}
                 />
 
                 <Button
@@ -126,6 +134,8 @@ const LoginScreen = ({ navigation }) => {
                   />
                 </View>
               </View>
+            </View>
+          </TouchableWithoutFeedback>
         </ScrollView>
       </KeyboardAvoidingView>
     </SafeAreaView>
@@ -144,6 +154,9 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     paddingHorizontal: 24,
   },
+  content: {
+    flex: 1,
+  },
   logoContainer: {
     alignItems: 'center',
     paddingTop: 60,

src/screens/Auth/RegisterScreen.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import {
   View,
   Text,
@@ -8,6 +8,8 @@ import {
   ScrollView,
   Platform,
   Alert,
+  TouchableWithoutFeedback,
+  Keyboard,
 } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import { useAuth } from '../../contexts/AuthContext';
@@ -25,6 +27,9 @@ const RegisterScreen = ({ navigation }) => {
   });
   const [errors, setErrors] = useState({});
   const { register, isLoading } = useAuth();
+  const nameInputRef = useRef(null);
+  const passwordInputRef = useRef(null);
+  const confirmPasswordInputRef = useRef(null);
 
   const updateField = (field, value) => {
     setFormData(prev => ({ ...prev, [field]: value }));
@@ -82,7 +87,7 @@ const RegisterScreen = ({ navigation }) => {
   };
 
   const navigateToLogin = () => {
-    navigation.navigate('Login');
+    navigation.replace('Login');
   };
 
   return (
@@ -97,6 +102,8 @@ const RegisterScreen = ({ navigation }) => {
           showsVerticalScrollIndicator={false}
           keyboardShouldPersistTaps="handled"
         >
+          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            <View style={styles.content}>
               <View style={styles.logoContainer}>
                 <Logo width={100} height={100} />
                 <Text style={styles.appName}>TBBANK ONLINE</Text>
@@ -117,18 +124,24 @@ const RegisterScreen = ({ navigation }) => {
                   leftIcon="call"
                   error={errors.phone}
                   maxLength={8}
+                  returnKeyType="next"
+                  onSubmitEditing={() => nameInputRef.current?.focus()}
                 />
 
                 <Input
+                  ref={nameInputRef}
                   label="Ady"
                   value={formData.name}
                   onChangeText={(value) => updateField('name', value)}
                   placeholder="Doly adyňyzy giriziň"
                   leftIcon="person"
                   error={errors.name}
+                  returnKeyType="next"
+                  onSubmitEditing={() => passwordInputRef.current?.focus()}
                 />
 
                 <Input
+                  ref={passwordInputRef}
                   label="Parol"
                   value={formData.password}
                   onChangeText={(value) => updateField('password', value)}
@@ -136,9 +149,12 @@ const RegisterScreen = ({ navigation }) => {
                   secureTextEntry
                   leftIcon="lock-closed"
                   error={errors.password}
+                  returnKeyType="next"
+                  onSubmitEditing={() => confirmPasswordInputRef.current?.focus()}
                 />
 
                 <Input
+                  ref={confirmPasswordInputRef}
                   label="Paroly tassyklaň"
                   value={formData.confirmPassword}
                   onChangeText={(value) => updateField('confirmPassword', value)}
@@ -146,6 +162,8 @@ const RegisterScreen = ({ navigation }) => {
                   secureTextEntry
                   leftIcon="lock-closed"
                   error={errors.confirmPassword}
+                  returnKeyType="done"
+                  onSubmitEditing={handleRegister}
                 />
 
                 <Button
@@ -165,6 +183,8 @@ const RegisterScreen = ({ navigation }) => {
                   />
                 </View>
               </View>
+            </View>
+          </TouchableWithoutFeedback>
         </ScrollView>
       </KeyboardAvoidingView>
     </SafeAreaView>
@@ -183,6 +203,9 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     paddingHorizontal: 24,
   },
+  content: {
+    flex: 1,
+  },
   logoContainer: {
     alignItems: 'center',
     paddingTop: 60,

src/screens/Auth/VerificationScreen.js

@@ -6,8 +6,13 @@ import {
   SafeAreaView,
   Alert,
   TouchableOpacity,
+  TouchableWithoutFeedback,
+  Keyboard,
+  BackHandler,
+  Platform,
 } from 'react-native';
 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';
@@ -35,6 +40,21 @@ const VerificationScreen = ({ navigation }) => {
     };
   }, []);
 
+  // Handle Android hardware back button
+  useFocusEffect(
+    React.useCallback(() => {
+      const onBackPress = () => {
+        handleGoBack();
+        return true; // Prevent default behavior
+      };
+
+      if (Platform.OS === 'android') {
+        BackHandler.addEventListener('hardwareBackPress', onBackPress);
+        return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      }
+    }, [handleGoBack])
+  );
+
   const startCountdown = () => {
     setCountdown(60);
     setCanResend(false);
@@ -73,7 +93,7 @@ const VerificationScreen = ({ navigation }) => {
     }
   };
 
-  const handleResendCode = () => {
+  const handleResendCode = async () => {
     if (!canResend) return;
     
     // Here you would call the API to resend the code
@@ -82,15 +102,22 @@ const VerificationScreen = ({ navigation }) => {
     startCountdown();
   };
 
-  const handleGoBack = () => {
+  const handleGoBack = React.useCallback(() => {
     clearPendingVerification();
+    
+    // Check if we can go back, if not navigate to Login
+    if (navigation.canGoBack()) {
       navigation.goBack();
-  };
+    } else {
+      navigation.navigate('Login');
+    }
+  }, [clearPendingVerification, navigation]);
 
   const formatPhoneNumber = (phone) => {
     if (!phone) return '';
     const phoneStr = phone.toString();
-    return `+993 ${phoneStr.slice(0, 2)} ${phoneStr.slice(2, 5)} ${phoneStr.slice(5)}`;
+    
+    return `+993 ${phoneStr.slice(0, 2)} ${phoneStr.slice(2, 4)}-${phoneStr.slice(4, 6)}-${phoneStr.slice(6)}`;
   };
 
   if (!pendingVerification) {
@@ -107,6 +134,7 @@ const VerificationScreen = ({ navigation }) => {
         </TouchableOpacity>
       </View>
 
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <View style={styles.content}>
           <View style={styles.logoContainer}>
             <View style={styles.verificationIcon}>
@@ -129,6 +157,8 @@ const VerificationScreen = ({ navigation }) => {
               maxLength={6}
               style={styles.codeInput}
               textAlign="center"
+              returnKeyType="done"
+              onSubmitEditing={handleVerify}
             />
 
             <Button
@@ -151,6 +181,7 @@ const VerificationScreen = ({ navigation }) => {
             </View>
           </View>
         </View>
+      </TouchableWithoutFeedback>
     </SafeAreaView>
   );
 };