FIX | Language icons to SVG | Icons folder

ios/Podfile.lock

@@ -1069,7 +1069,7 @@ PODS:
   - RNScreens (3.15.0):
     - React-Core
     - React-RCTImage
-  - RNSVG (12.4.4):
+  - RNSVG (12.5.1):
     - React-Core
   - Yoga (1.14.0)
 
@@ -1271,7 +1271,7 @@ SPEC CHECKSUMS:
   RNFBFirestore: fb27c396d6110045d27cabc285ad6259ce50dc1c
   RNGestureHandler: bad495418bcbd3ab47017a38d93d290ebd406f50
   RNScreens: 4a1af06327774490d97342c00aee0c2bafb497b7
-  RNSVG: ecd661f380a07ba690c9c5929c475a44f432d674
+  RNSVG: d7d7bc8229af3842c9cfc3a723c815a52cdd1105
   Yoga: d6b6a80659aa3e91aaba01d0012e7edcbedcbecd
 
 PODFILE CHECKSUM: 556be51da6823f6b1024ac046f8f71722faa783d

package-lock.json

@@ -26,7 +26,7 @@
         "react-native-safe-area-context": "^4.3.1",
         "react-native-screens": "^3.15.0",
         "react-native-splash-screen": "^3.3.0",
-        "react-native-svg": "^12.4.4",
+        "react-native-svg": "^12.5.1",
         "react-native-svg-transformer": "^1.0.0",
         "react-native-vector-icons": "^9.2.0",
         "react-redux": "^8.0.5"
@@ -13529,9 +13529,9 @@
       }
     },
     "node_modules/react-native-svg": {
-      "version": "12.4.4",
-      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-12.4.4.tgz",
-      "integrity": "sha512-LpcNlEVCURexqPAvQ9ne8KrPVfYz0wIDygwud8VMRmXLezysXzyQN/DTsjm1BO9lIfYp55WQsr3u3yW/vk6iiA==",
+      "version": "12.5.1",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-12.5.1.tgz",
+      "integrity": "sha512-c374ENsq2MWCfr+7jC7TGwSeOAuC1Dp0osh2pw8PjpYFxmmB/toFIwcnCLz+SgBd6iLJClRhbATealqM05HOGg==",
       "dependencies": {
         "css-select": "^5.1.0",
         "css-tree": "^1.1.3"
@@ -27295,9 +27295,9 @@
       "requires": {}
     },
     "react-native-svg": {
-      "version": "12.4.4",
-      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-12.4.4.tgz",
-      "integrity": "sha512-LpcNlEVCURexqPAvQ9ne8KrPVfYz0wIDygwud8VMRmXLezysXzyQN/DTsjm1BO9lIfYp55WQsr3u3yW/vk6iiA==",
+      "version": "12.5.1",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-12.5.1.tgz",
+      "integrity": "sha512-c374ENsq2MWCfr+7jC7TGwSeOAuC1Dp0osh2pw8PjpYFxmmB/toFIwcnCLz+SgBd6iLJClRhbATealqM05HOGg==",
       "requires": {
         "css-select": "^5.1.0",
         "css-tree": "^1.1.3"

package.json

@@ -33,7 +33,7 @@
     "react-native-safe-area-context": "^4.3.1",
     "react-native-screens": "^3.15.0",
     "react-native-splash-screen": "^3.3.0",
-    "react-native-svg": "^12.4.4",
+    "react-native-svg": "^12.5.1",
     "react-native-svg-transformer": "^1.0.0",
     "react-native-vector-icons": "^9.2.0",
     "react-redux": "^8.0.5"

src/assets/icons/ENG.svg

@@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_836_1331)">
+<rect width="24" height="24" rx="12" fill="#1A47B8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.22563 0H-4.79999V4L25.2063 24L28.8 24V20L-1.22563 0Z" fill="white"/>
+<path d="M-3.60783 0L28.8 21.6567V24H27.6358L-4.79999 2.32089V0H-3.60783Z" fill="#F93939"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.6 0H28.8V4C28.8 4 8.0157 17.3249 -1.59999 24H-4.79999V20L25.6 0Z" fill="white"/>
+<path d="M28.8 0H27.7148L-4.79999 21.6753V24H-3.60783L28.8 2.33842V0Z" fill="#F93939"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.41933 0H16.6086V7.40291H28.8V16.5922H16.6086V24H7.41933V16.5922H-4.79999V7.40291H7.41933V0Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.34738 0H14.6526V9.23077H28.8V14.7692H14.6526V24H9.34738V14.7692H-4.79999V9.23077H9.34738V0Z" fill="#F93939"/>
+</g>
+<defs>
+<clipPath id="clip0_836_1331">
+<rect width="24" height="24" rx="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/UAE.svg

@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_836_1381)">
+<rect width="24" height="24" rx="12" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.208 16 16 14.208 16 12C16 9.792 14.208 8 12 8C9.79201 8 8.00001 9.792 8.00001 12C8.00001 14.208 9.79201 16 12 16ZM12 14.4C13.3248 14.4 14.4 13.3248 14.4 12C14.4 10.6752 13.3248 9.6 12 9.6C10.6752 9.6 9.60001 10.6752 9.60001 12C9.60001 13.3248 10.6752 14.4 12 14.4Z" fill="#1A47B8"/>
+<path d="M12 12.8C12.4418 12.8 12.8 12.4418 12.8 12C12.8 11.5582 12.4418 11.2 12 11.2C11.5582 11.2 11.2 11.5582 11.2 12C11.2 12.4418 11.5582 12.8 12 12.8Z" fill="#1A47B8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-4.79999 16H28.8V24H-4.79999V16Z" fill="#249F58"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-4.79999 0H28.8V8H-4.79999V0Z" fill="#FF6C2D"/>
+</g>
+<defs>
+<clipPath id="clip0_836_1381">
+<rect width="24" height="24" rx="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/UKR.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_835_1324)">
+<path d="M24 0H0V12.8H24V0Z" fill="#3A99FF"/>
+<path d="M24 12H0V24.8H24V12Z" fill="#FFDA2C"/>
+</g>
+<defs>
+<clipPath id="clip0_835_1324">
+<rect width="24" height="24" rx="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/i18n/locales/en/custom-pack.translation.ts

@@ -0,0 +1,4 @@
+export const customPack = {
+title: 'Create custom pack',
+description: 'Create your own custom pack with questions and task. It all depends on your imagination!',
+}

src/i18n/locales/en/index.ts

@@ -2,8 +2,10 @@ import {MainLocaleModule} from '../../types';
 import {settingTranslation} from './settings.translation';
 import {onBoardingTranslation} from './steps.translation';
 import {buttonsTranslation} from './onBoardingButton.translation';
+import {customPack} from './custom-pack.translation';
 export const en: MainLocaleModule = {
   settingTranslation,
   stepTranslation: onBoardingTranslation,
   buttonsTranslation,
+  customPack,
 };

src/i18n/locales/hi/custom-pack.translation.ts

@@ -0,0 +1,4 @@
+export const customPack = {
+title: 'एक कस्टम पैकेज बनाएँ',
+description: 'प्रश्नों और अभ्यासों का अपना पैकेट बनाएँ। यह सब आपकी कल्पना पर निर्भर करता है!',
+}

src/i18n/locales/hi/index.tsx

@@ -2,8 +2,10 @@ import {MainLocaleModule} from '../../types';
 import {settingTranslation} from './settings.translation';
 import {onBoardingTranslation} from './steps.translation';
 import { buttonsTranslation } from './onBoardingButton.translation';
+import {customPack} from './custom-pack.translation';
 export const hi: MainLocaleModule = {
   settingTranslation,
   stepTranslation: onBoardingTranslation,
   buttonsTranslation,
+  customPack,
 };

src/i18n/locales/ua/custom-pack.translation.ts

@@ -0,0 +1,4 @@
+export const customPack = {
+title: 'Створіть індивідуальний пакет',
+description: 'Створіть свій власний пакет із запитаннями та завданнями. Все залежить від вашої фантазії!',
+}

src/i18n/locales/ua/index.ts

@@ -2,9 +2,11 @@ import {MainLocaleModule} from '../../types';
 import {settingTranslation} from './settings.translation';
 import {onBoardingTranslationUa} from './step.translation';
 import { buttonsTranslation } from './onBoardingButton.translation';
+import {customPack} from './custom-pack.translation';
 
 export const ua: MainLocaleModule = {
   stepTranslation: onBoardingTranslationUa,
   settingTranslation: settingTranslation,
   buttonsTranslation,
+  customPack,
 };

src/i18n/locales/ua/step.translation.ts

@@ -10,12 +10,12 @@ export const onBoardingTranslationUa = {
   step2: {
     title: 'Розслабтеся та насолоджуйтеся грою',
     description:
-      'У цій грі є 5 рівнів "пікантності", деякі з яких розділені на ігри для пари або компанії. Все, що вам потрібно зробити, це додати \n гравців, і ви можете почати грати.\n P.S. Ви завжди можете створити власні \n питання та завдання',
+      'У цій грі є 5 рівнів "пікантності", деякі з яких розділені на ігри для пари або компанії. Все, що вам потрібно зробити, це додати гравців, і ви можете почати грати.\n P.S. Ви завжди можете створити власні питання та завдання',
   },
   step3: {
     title: 'Преміум версія!',
     description:
-      'Надає необмежений доступ до пакетів Hard і \nНасолоджуйтеся інтригуючими запитаннями та\nзахоплюючими діями',
+      'Надає необмежений доступ до пакетів Hard та режиму Extreme \nНасолоджуйтеся інтригуючими запитаннями та\nзахоплюючими діями',
   },
 };
 

src/i18n/types/index.ts

@@ -1,3 +1,4 @@
+import { CustomPack } from '../../module/shared/interfaces/custom-pack';
 import { Buttons } from './buttons.types';
 import {OnBoardingLocale} from './on-boarding.types';
 import {SettingLocale} from './settings.types';
@@ -5,4 +6,5 @@ export interface MainLocaleModule {
   stepTranslation: OnBoardingLocale.OnboardingSteps;
   settingTranslation: SettingLocale.Core;
   buttonsTranslation: Buttons;
+  customPack: CustomPack;
 }

src/module/game/screen/select-packages.screen.tsx

@@ -7,27 +7,30 @@ import {
   ScreenLayout,
 } from '../../shared';
 import {PackagesList} from '../../package';
+import { ScrollView } from 'react-native-gesture-handler';
 interface IProps extends IRouteParams {}
 
 export const SelectPackages: FC<IProps> = ({navigation}) => {
 
   return (
     <ScreenLayout
-      backgroundColor={colors.primaryColor}
+    backgroundColor={colors.primaryColor}
       backgroundStatusBar={colors.primaryColor}
       headerComponent={
         <Header
-          leftIcon="settings"
-          rightIcon="setting"
-          onPressRight={() =>
+        leftIcon="settings"
+        rightIcon="setting"
+        onPressRight={() =>
             navigation.navigate(RouteKey.Setting, {
               previous_screen: RouteKey.Game,
               title: RouteKey.Setting,
             })
           }
-        />
+          />
       }>
+          <ScrollView contentContainerStyle={{paddingBottom: 30, paddingHorizontal: 5}}>
       <PackagesList />
+      </ScrollView>
     </ScreenLayout>
   );
 };

src/module/package/atoms/create-custom-package.atom.tsx

@@ -1,20 +1,23 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import React from 'react';
+import {useTranslation} from 'react-i18next';
 import {StyleSheet, TouchableOpacity, View, Text} from 'react-native';
 import {colors, Icon} from '../../shared';
 
 export const CustomPackage = () => {
+  const {t, i18n} = useTranslation();
+
+
   return (
     <TouchableOpacity style={style.container}>
       <View style={{flexDirection: 'row'}}>
         <View style={style.iconContainer}>
-          <Icon name="lock" size={22} color="white"/>
+          <Icon name="lock" size={22} color="white" />
         </View>
         <View style={style.textContainer}>
-          <Text style={style.title}>Create custom pack</Text>
+          <Text style={style.title}>{t('customPack.title')}</Text>
           <Text style={style.description}>
-            Create your own custom pack with questions and task. It all depends
-            on your imagination!
+          {t('customPack.description')}
           </Text>
         </View>
       </View>

src/module/root/components/language-item.component.tsx

@@ -8,7 +8,9 @@ interface IProps {
 export const LanguageItem: FC<IProps> = ({icon, name, onPress}) => {
   return (
     <TouchableOpacity onPress={onPress} style={styles.container}>
-      <View style={styles.circleContainer}>{icon}</View>
+      <View style={styles.circleContainer}>
+        {icon}
+      </View>
       <Text style={styles.nameLanguage}>{name}</Text>
     </TouchableOpacity>
   );

src/module/root/navigations-groups/on-boardings-group.tsx

@@ -67,7 +67,7 @@ export const OnboardingGroup: FC = () => {
       screenOptions={{
         headerShown: false,
       }}
-      initialRouteName={RouteKey.Loading}>
+      initialRouteName={RouteKey.LanguageSelect}>
       <Stack.Screen name={RouteKey.Questions} component={Questions} />
       <Stack.Screen name={RouteKey.Package} component={Game} />
       <Stack.Screen name={RouteKey.Onboarding} component={Onboarding} />

src/module/root/screens/language-select.screen.tsx

@@ -6,20 +6,24 @@ import {LangKeys} from '../../../i18n';
 import { StorageKey, storageService } from '../../services/async-storage.service';
 import {IRouteParams, RouteKey, colors, ScreenLayout} from '../../shared';
 import {LanguageItem} from '../components';
+import UALogo from '../../../assets/icons/UKR.svg';
+import UAELogo from '../../../assets/icons/UAE.svg';
+import ENGLogo from '../../../assets/icons/ENG.svg';
+
 const languageArr = [
   {
     name: 'Українська',
-    icon: <Image source={require('../../../assets/icons/UKR.png')} />,
+    icon: <UALogo />,
     key: LangKeys.UA,
   },
   {
     name: 'English',
-    icon: <Image source={require('../../../assets/icons/ENG.png')} />,
+    icon: <ENGLogo />,
     key: LangKeys.EN,
   },
   {
     name: 'Hindi',
-    icon: <Image source={require('../../../assets/icons/UAE.png')} />,
+    icon: <UAELogo />,
     key: LangKeys.HI,
   },
 ];

src/module/shared/interfaces/custom-pack.ts

@@ -0,0 +1,4 @@
+export interface CustomPack {
+    title: string;
+    description: string;
+}