141 lines
3.5 KiB
TypeScript
141 lines
3.5 KiB
TypeScript
import { useNavigation } from '@react-navigation/native';
|
||
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||
import React from 'react';
|
||
import {
|
||
Image,
|
||
ScrollView,
|
||
StyleSheet,
|
||
Text,
|
||
TouchableOpacity,
|
||
View,
|
||
} from 'react-native';
|
||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||
import RU from 'screens/../../assets/bootsplash/RU.png';
|
||
import UZ from 'screens/../../assets/bootsplash/UZ.png';
|
||
import Logo from 'screens/../../assets/bootsplash/logo_512.png';
|
||
import { RootStackParamList } from 'types/types';
|
||
import { changeLanguage } from 'utils/changeLanguage';
|
||
|
||
type NavigationProp = NativeStackNavigationProp<RootStackParamList>;
|
||
|
||
const SelectLangPage = () => {
|
||
const navigation = useNavigation<NavigationProp>();
|
||
|
||
const selectLanguage = async (lang: 'uz' | 'ru') => {
|
||
await changeLanguage(lang);
|
||
navigation.navigate('select-auth');
|
||
};
|
||
|
||
return (
|
||
<SafeAreaView style={{ flex: 1 }}>
|
||
<View style={styles.container}>
|
||
<ScrollView
|
||
style={{ flex: 1 }}
|
||
contentContainerStyle={styles.scrollContent}
|
||
showsVerticalScrollIndicator={false}
|
||
>
|
||
<View style={[styles.innerContainer, { maxWidth: 500 }]}>
|
||
<View style={styles.logoWrapper}>
|
||
<Image
|
||
source={Logo}
|
||
style={[
|
||
styles.logoImage,
|
||
{
|
||
width: 180,
|
||
height: 180,
|
||
},
|
||
]}
|
||
/>
|
||
<Text style={[styles.logoText, { fontSize: 24 }]}>CPOST</Text>
|
||
</View>
|
||
|
||
<Text style={[styles.title, { fontSize: 24 }]}>
|
||
Tilni tanlang{' '}
|
||
<Text style={[styles.title, { fontSize: 18 }]}>
|
||
(Выберите язык)
|
||
</Text>
|
||
</Text>
|
||
|
||
<View style={styles.btnContainer}>
|
||
<TouchableOpacity
|
||
onPress={() => selectLanguage('uz')}
|
||
style={styles.button}
|
||
>
|
||
<Image source={UZ} style={styles.flag} />
|
||
<Text style={styles.btnText}>O'zbek tili</Text>
|
||
</TouchableOpacity>
|
||
|
||
<TouchableOpacity
|
||
onPress={() => selectLanguage('ru')}
|
||
style={styles.button}
|
||
>
|
||
<Image source={RU} style={styles.flag} />
|
||
<Text style={styles.btnText}>Русский язык</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
</ScrollView>
|
||
</View>
|
||
</SafeAreaView>
|
||
);
|
||
};
|
||
|
||
export default SelectLangPage;
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
paddingHorizontal: 20,
|
||
margin: 5,
|
||
borderRadius: 12,
|
||
},
|
||
scrollContent: {
|
||
flexGrow: 1,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
},
|
||
innerContainer: {
|
||
width: '100%',
|
||
paddingHorizontal: 10,
|
||
},
|
||
logoWrapper: {
|
||
alignItems: 'center',
|
||
marginBottom: 30,
|
||
},
|
||
logoImage: {
|
||
resizeMode: 'stretch',
|
||
marginBottom: 8,
|
||
},
|
||
logoText: {
|
||
fontWeight: '500',
|
||
color: '#28A7E8',
|
||
},
|
||
title: {
|
||
fontWeight: '500',
|
||
textAlign: 'center',
|
||
color: '#28A7E8',
|
||
marginBottom: 24,
|
||
},
|
||
button: {
|
||
backgroundColor: '#28A7E8',
|
||
height: 56,
|
||
borderRadius: 6,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 10,
|
||
paddingHorizontal: 16,
|
||
},
|
||
btnText: {
|
||
color: '#fff',
|
||
fontSize: 18,
|
||
},
|
||
btnContainer: {
|
||
gap: 16,
|
||
},
|
||
flag: {
|
||
width: 30,
|
||
height: 30,
|
||
resizeMode: 'cover',
|
||
},
|
||
});
|