Initial commit

src/screens/auth/select-language/SelectLangPage.tsx

@@ -0,0 +1,151 @@
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import React from 'react';
+import {
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+  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 { width } = useWindowDimensions();
+
+  const isSmallScreen = width < 380;
+
+  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: isSmallScreen ? 120 : 250,
+                    height: isSmallScreen ? 120 : 200,
+                    borderRadius: 20000,
+                  },
+                ]}
+              />
+              <Text
+                style={[styles.logoText, { fontSize: isSmallScreen ? 24 : 40 }]}
+              >
+                CPOST
+              </Text>
+            </View>
+
+            <Text style={[styles.title, { fontSize: isSmallScreen ? 18 : 24 }]}>
+              Tilni tanlang{' '}
+              <Text
+                style={[styles.title, { fontSize: isSmallScreen ? 14 : 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: '700',
+    color: '#28A7E8',
+  },
+  title: {
+    fontWeight: '600',
+    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',
+  },
+});