amazing design

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,74 +102,89 @@ const RegisterScreen = ({ navigation }) => {
           showsVerticalScrollIndicator={false}
           keyboardShouldPersistTaps="handled"
         >
-          <View style={styles.logoContainer}>
-            <Logo width={100} height={100} />
-            <Text style={styles.appName}>TBBANK ONLINE</Text>
-          </View>
+          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            <View style={styles.content}>
+              <View style={styles.logoContainer}>
+                <Logo width={100} height={100} />
+                <Text style={styles.appName}>TBBANK ONLINE</Text>
+              </View>
 
-          <View style={styles.formContainer}>
-            <Text style={styles.formTitle}>Agza bol</Text>
-            <Text style={styles.formSubtitle}>
-              Täze hasap döretmek üçin maglumatyňyzy giriziň
-            </Text>
+              <View style={styles.formContainer}>
+                <Text style={styles.formTitle}>Agza bol</Text>
+                <Text style={styles.formSubtitle}>
+                  Täze hasap döretmek üçin maglumatyňyzy giriziň
+                </Text>
 
-            <Input
-              label="Telefon belgi"
-              value={formData.phone}
-              onChangeText={(value) => updateField('phone', value)}
-              placeholder="61909090"
-              keyboardType="numeric"
-              leftIcon="call"
-              error={errors.phone}
-              maxLength={8}
-            />
+                <Input
+                  label="Telefon belgi"
+                  value={formData.phone}
+                  onChangeText={(value) => updateField('phone', value)}
+                  placeholder="61909090"
+                  keyboardType="numeric"
+                  leftIcon="call"
+                  error={errors.phone}
+                  maxLength={8}
+                  returnKeyType="next"
+                  onSubmitEditing={() => nameInputRef.current?.focus()}
+                />
 
-            <Input
-              label="Ady"
-              value={formData.name}
-              onChangeText={(value) => updateField('name', value)}
-              placeholder="Doly adyňyzy giriziň"
-              leftIcon="person"
-              error={errors.name}
-            />
+                <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
-              label="Parol"
-              value={formData.password}
-              onChangeText={(value) => updateField('password', value)}
-              placeholder="Parolyňyzy giriziň"
-              secureTextEntry
-              leftIcon="lock-closed"
-              error={errors.password}
-            />
+                <Input
+                  ref={passwordInputRef}
+                  label="Parol"
+                  value={formData.password}
+                  onChangeText={(value) => updateField('password', value)}
+                  placeholder="Parolyňyzy giriziň"
+                  secureTextEntry
+                  leftIcon="lock-closed"
+                  error={errors.password}
+                  returnKeyType="next"
+                  onSubmitEditing={() => confirmPasswordInputRef.current?.focus()}
+                />
 
-            <Input
-              label="Paroly tassyklaň"
-              value={formData.confirmPassword}
-              onChangeText={(value) => updateField('confirmPassword', value)}
-              placeholder="Paroly gaýtadan giriziň"
-              secureTextEntry
-              leftIcon="lock-closed"
-              error={errors.confirmPassword}
-            />
+                <Input
+                  ref={confirmPasswordInputRef}
+                  label="Paroly tassyklaň"
+                  value={formData.confirmPassword}
+                  onChangeText={(value) => updateField('confirmPassword', value)}
+                  placeholder="Paroly gaýtadan giriziň"
+                  secureTextEntry
+                  leftIcon="lock-closed"
+                  error={errors.confirmPassword}
+                  returnKeyType="done"
+                  onSubmitEditing={handleRegister}
+                />
 
-            <Button
-              title="Agza bol"
-              onPress={handleRegister}
-              loading={isLoading}
-              style={styles.registerButton}
-            />
+                <Button
+                  title="Agza bol"
+                  onPress={handleRegister}
+                  loading={isLoading}
+                  style={styles.registerButton}
+                />
 
-            <View style={styles.loginContainer}>
-              <Text style={styles.loginText}>Eýýäm hasabyňyz barmy? </Text>
-              <Button
-                title="Gir"
-                onPress={navigateToLogin}
-                variant="outline"
-                style={styles.loginButton}
-              />
+                <View style={styles.loginContainer}>
+                  <Text style={styles.loginText}>Eýýäm hasabyňyz barmy? </Text>
+                  <Button
+                    title="Gir"
+                    onPress={navigateToLogin}
+                    variant="outline"
+                    style={styles.loginButton}
+                  />
+                </View>
+              </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,