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 { 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: {

3
src/navigation/AuthNavigator.js
View File

@@ -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} />

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

@@ -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,

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

@@ -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,

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

@@ -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>
);
};