nurmuhammet/tbbank-react-native-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

amazing design

Browse Source
This commit is contained in:
Nurmuhammet Allanov
2025-07-03 20:56:50 +05:00
parent 2a597df2d3
commit b56a96f0ff
5 changed files with 225 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Input.js
View File

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

3
src/navigation/AuthNavigator.js
View File

@@ -15,6 +15,7 @@ const AuthNavigator = () => {
<Stack.Navigator <Stack.Navigator
screenOptions={{ screenOptions={{
headerShown: false, headerShown: false,
gestureEnabled: true,
cardStyleInterpolator: ({ current, layouts }) => { cardStyleInterpolator: ({ current, layouts }) => {
return { return {
cardStyle: { 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="Login" component={LoginScreen} />
<Stack.Screen name="Register" component={RegisterScreen} /> <Stack.Screen name="Register" component={RegisterScreen} />

103
src/screens/Auth/LoginScreen.js
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { useState, useRef } from 'react';
import { import {
View, View,
Text, Text,
@@ -24,6 +24,7 @@ const LoginScreen = ({ navigation }) => {
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [errors, setErrors] = useState({}); const [errors, setErrors] = useState({});
const { login, isLoading } = useAuth(); const { login, isLoading } = useAuth();
const passwordInputRef = useRef(null);
const validateForm = () => { const validateForm = () => {
const newErrors = {}; const newErrors = {};
@@ -76,56 +77,65 @@ const LoginScreen = ({ navigation }) => {
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled" keyboardShouldPersistTaps="handled"
> >
<View style={styles.logoContainer}> <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<Logo width={100} height={100} /> <View style={styles.content}>
<Text style={styles.appName}>TBBANK ONLINE</Text> <View style={styles.logoContainer}>
<Text style={styles.welcomeText}>Hoş geldiňiz</Text> <Logo width={100} height={100} />
</View> <Text style={styles.appName}>TBBANK ONLINE</Text>
<Text style={styles.welcomeText}>Hoş geldiňiz</Text>
</View>
<View style={styles.formContainer}> <View style={styles.formContainer}>
<Text style={styles.formTitle}>Giriş</Text> <Text style={styles.formTitle}>Giriş</Text>
<Text style={styles.formSubtitle}> <Text style={styles.formSubtitle}>
Hasabyňyza girmek üçin maglumatyňyzy giriziň Hasabyňyza girmek üçin maglumatyňyzy giriziň
</Text> </Text>
<Input <Input
label="Telefon belgi" label="Telefon belgi"
value={phone} value={phone}
onChangeText={setPhone} onChangeText={setPhone}
placeholder="61909090" placeholder="61909090"
keyboardType="numeric" keyboardType="numeric"
leftIcon="call" leftIcon="call"
error={errors.phone} error={errors.phone}
maxLength={8} maxLength={8}
/> returnKeyType="next"
onSubmitEditing={() => passwordInputRef.current?.focus()}
/>
<Input <Input
label="Parol" ref={passwordInputRef}
value={password} label="Parol"
onChangeText={setPassword} value={password}
placeholder="Parolyňyzy giriziň" onChangeText={setPassword}
secureTextEntry placeholder="Parolyňyzy giriziň"
leftIcon="lock-closed" secureTextEntry
error={errors.password} leftIcon="lock-closed"
/> error={errors.password}
returnKeyType="done"
onSubmitEditing={handleLogin}
/>
<Button <Button
title="Gir" title="Gir"
onPress={handleLogin} onPress={handleLogin}
loading={isLoading} loading={isLoading}
style={styles.loginButton} style={styles.loginButton}
/> />
<View style={styles.registerContainer}> <View style={styles.registerContainer}>
<Text style={styles.registerText}>Hasabyňyz ýokmy? </Text> <Text style={styles.registerText}>Hasabyňyz ýokmy? </Text>
<Button <Button
title="Agza bol" title="Agza bol"
onPress={navigateToRegister} onPress={navigateToRegister}
variant="outline" variant="outline"
style={styles.registerButton} style={styles.registerButton}
/> />
</View>
</View>
</View> </View>
</View> </TouchableWithoutFeedback>
</ScrollView> </ScrollView>
</KeyboardAvoidingView> </KeyboardAvoidingView>
</SafeAreaView> </SafeAreaView>
@@ -144,6 +154,9 @@ const styles = StyleSheet.create({
flexGrow: 1, flexGrow: 1,
paddingHorizontal: 24, paddingHorizontal: 24,
}, },
content: {
flex: 1,
},
logoContainer: { logoContainer: {
alignItems: 'center', alignItems: 'center',
paddingTop: 60, paddingTop: 60,

147
src/screens/Auth/RegisterScreen.js
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { useState, useRef } from 'react';
import { import {
View, View,
Text, Text,
@@ -8,6 +8,8 @@ import {
ScrollView, ScrollView,
Platform, Platform,
Alert, Alert,
TouchableWithoutFeedback,
Keyboard,
} from 'react-native'; } from 'react-native';
import { StatusBar } from 'expo-status-bar'; import { StatusBar } from 'expo-status-bar';
import { useAuth } from '../../contexts/AuthContext'; import { useAuth } from '../../contexts/AuthContext';
@@ -25,6 +27,9 @@ const RegisterScreen = ({ navigation }) => {
}); });
const [errors, setErrors] = useState({}); const [errors, setErrors] = useState({});
const { register, isLoading } = useAuth(); const { register, isLoading } = useAuth();
const nameInputRef = useRef(null);
const passwordInputRef = useRef(null);
const confirmPasswordInputRef = useRef(null);
const updateField = (field, value) => { const updateField = (field, value) => {
setFormData(prev => ({ ...prev, [field]: value })); setFormData(prev => ({ ...prev, [field]: value }));
@@ -82,7 +87,7 @@ const RegisterScreen = ({ navigation }) => {
}; };
const navigateToLogin = () => { const navigateToLogin = () => {
navigation.navigate('Login'); navigation.replace('Login');
}; };
return ( return (
@@ -97,74 +102,89 @@ const RegisterScreen = ({ navigation }) => {
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled" keyboardShouldPersistTaps="handled"
> >
<View style={styles.logoContainer}> <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<Logo width={100} height={100} /> <View style={styles.content}>
<Text style={styles.appName}>TBBANK ONLINE</Text> <View style={styles.logoContainer}>
</View> <Logo width={100} height={100} />
<Text style={styles.appName}>TBBANK ONLINE</Text>
</View>
<View style={styles.formContainer}> <View style={styles.formContainer}>
<Text style={styles.formTitle}>Agza bol</Text> <Text style={styles.formTitle}>Agza bol</Text>
<Text style={styles.formSubtitle}> <Text style={styles.formSubtitle}>
Täze hasap döretmek üçin maglumatyňyzy giriziň Täze hasap döretmek üçin maglumatyňyzy giriziň
</Text> </Text>
<Input <Input
label="Telefon belgi" label="Telefon belgi"
value={formData.phone} value={formData.phone}
onChangeText={(value) => updateField('phone', value)} onChangeText={(value) => updateField('phone', value)}
placeholder="61909090" placeholder="61909090"
keyboardType="numeric" keyboardType="numeric"
leftIcon="call" leftIcon="call"
error={errors.phone} error={errors.phone}
maxLength={8} maxLength={8}
/> returnKeyType="next"
onSubmitEditing={() => nameInputRef.current?.focus()}
/>
<Input <Input
label="Ady" ref={nameInputRef}
value={formData.name} label="Ady"
onChangeText={(value) => updateField('name', value)} value={formData.name}
placeholder="Doly adyňyzy giriziň" onChangeText={(value) => updateField('name', value)}
leftIcon="person" placeholder="Doly adyňyzy giriziň"
error={errors.name} leftIcon="person"
/> error={errors.name}
returnKeyType="next"
onSubmitEditing={() => passwordInputRef.current?.focus()}
/>
<Input <Input
label="Parol" ref={passwordInputRef}
value={formData.password} label="Parol"
onChangeText={(value) => updateField('password', value)} value={formData.password}
placeholder="Parolyňyzy giriziň" onChangeText={(value) => updateField('password', value)}
secureTextEntry placeholder="Parolyňyzy giriziň"
leftIcon="lock-closed" secureTextEntry
error={errors.password} leftIcon="lock-closed"
/> error={errors.password}
returnKeyType="next"
onSubmitEditing={() => confirmPasswordInputRef.current?.focus()}
/>
<Input <Input
label="Paroly tassyklaň" ref={confirmPasswordInputRef}
value={formData.confirmPassword} label="Paroly tassyklaň"
onChangeText={(value) => updateField('confirmPassword', value)} value={formData.confirmPassword}
placeholder="Paroly gaýtadan giriziň" onChangeText={(value) => updateField('confirmPassword', value)}
secureTextEntry placeholder="Paroly gaýtadan giriziň"
leftIcon="lock-closed" secureTextEntry
error={errors.confirmPassword} leftIcon="lock-closed"
/> error={errors.confirmPassword}
returnKeyType="done"
onSubmitEditing={handleRegister}
/>
<Button <Button
title="Agza bol" title="Agza bol"
onPress={handleRegister} onPress={handleRegister}
loading={isLoading} loading={isLoading}
style={styles.registerButton} style={styles.registerButton}
/> />
<View style={styles.loginContainer}> <View style={styles.loginContainer}>
<Text style={styles.loginText}>Eýýäm hasabyňyz barmy? </Text> <Text style={styles.loginText}>Eýýäm hasabyňyz barmy? </Text>
<Button <Button
title="Gir" title="Gir"
onPress={navigateToLogin} onPress={navigateToLogin}
variant="outline" variant="outline"
style={styles.loginButton} style={styles.loginButton}
/> />
</View>
</View>
</View> </View>
</View> </TouchableWithoutFeedback>
</ScrollView> </ScrollView>
</KeyboardAvoidingView> </KeyboardAvoidingView>
</SafeAreaView> </SafeAreaView>
@@ -183,6 +203,9 @@ const styles = StyleSheet.create({
flexGrow: 1, flexGrow: 1,
paddingHorizontal: 24, paddingHorizontal: 24,
}, },
content: {
flex: 1,
},
logoContainer: { logoContainer: {
alignItems: 'center', alignItems: 'center',
paddingTop: 60, paddingTop: 60,

119
src/screens/Auth/VerificationScreen.js
View File

@@ -6,8 +6,13 @@ import {
SafeAreaView, SafeAreaView,
Alert, Alert,
TouchableOpacity, TouchableOpacity,
TouchableWithoutFeedback,
Keyboard,
BackHandler,
Platform,
} from 'react-native'; } from 'react-native';
import { StatusBar } from 'expo-status-bar'; import { StatusBar } from 'expo-status-bar';
import { useFocusEffect } from '@react-navigation/native';
import { useAuth } from '../../contexts/AuthContext'; import { useAuth } from '../../contexts/AuthContext';
import Button from '../../components/Button'; import Button from '../../components/Button';
import Input from '../../components/Input'; 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 = () => { const startCountdown = () => {
setCountdown(60); setCountdown(60);
setCanResend(false); setCanResend(false);
@@ -73,24 +93,31 @@ const VerificationScreen = ({ navigation }) => {
} }
}; };
const handleResendCode = () => { const handleResendCode = async () => {
if (!canResend) return; if (!canResend) return;
// Here you would call the API to resend the code // Here you would call the API to resend the code
// For now, just restart the countdown // For now, just restart the countdown
Alert.alert('Üstünlik', 'Täze tassyklama kody iberildi'); Alert.alert('Üstünlik', 'Täze tassyklama kody iberildi');
startCountdown(); startCountdown();
}; };
const handleGoBack = () => { const handleGoBack = React.useCallback(() => {
clearPendingVerification(); clearPendingVerification();
navigation.goBack();
}; // 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) => { const formatPhoneNumber = (phone) => {
if (!phone) return ''; if (!phone) return '';
const phoneStr = phone.toString(); 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) { if (!pendingVerification) {
@@ -107,50 +134,54 @@ const VerificationScreen = ({ navigation }) => {
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={styles.content}> <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.logoContainer}> <View style={styles.content}>
<View style={styles.verificationIcon}> <View style={styles.logoContainer}>
<Text style={styles.verificationIconText}>✓</Text> <View style={styles.verificationIcon}>
<Text style={styles.verificationIconText}>✓</Text>
</View>
<Text style={styles.title}>Tassyklama</Text>
<Text style={styles.subtitle}>
{formatPhoneNumber(pendingVerification.phone)} belgisine iberilen
6 sanly tassyklama koduny giriziň
</Text>
</View> </View>
<Text style={styles.title}>Tassyklama</Text>
<Text style={styles.subtitle}>
{formatPhoneNumber(pendingVerification.phone)} belgisine iberilen
6 sanly tassyklama koduny giriziň
</Text>
</View>
<View style={styles.formContainer}> <View style={styles.formContainer}>
<Input <Input
label="Tassyklama kody" label="Tassyklama kody"
value={code} value={code}
onChangeText={setCode} onChangeText={setCode}
placeholder="123456" placeholder="123456"
keyboardType="numeric" keyboardType="numeric"
maxLength={6} maxLength={6}
style={styles.codeInput} style={styles.codeInput}
textAlign="center" textAlign="center"
/> returnKeyType="done"
onSubmitEditing={handleVerify}
/>
<Button <Button
title="Tassykla" title="Tassykla"
onPress={handleVerify} onPress={handleVerify}
loading={isLoading} loading={isLoading}
style={styles.verifyButton} style={styles.verifyButton}
/> />
<View style={styles.resendContainer}> <View style={styles.resendContainer}>
{canResend ? ( {canResend ? (
<TouchableOpacity onPress={handleResendCode}> <TouchableOpacity onPress={handleResendCode}>
<Text style={styles.resendText}>Kodu gaýtadan iber</Text> <Text style={styles.resendText}>Kodu gaýtadan iber</Text>
</TouchableOpacity> </TouchableOpacity>
) : ( ) : (
<Text style={styles.countdownText}> <Text style={styles.countdownText}>
Gaýtadan ibermek üçin {countdown} sekunt garaşyň Gaýtadan ibermek üçin {countdown} sekunt garaşyň
</Text> </Text>
)} )}
</View>
</View> </View>
</View> </View>
</View> </TouchableWithoutFeedback>
</SafeAreaView> </SafeAreaView>
); );
}; };