added language

2024-11-24 05:31:16 -05:00 · 2021-07-12 16:12:32 -04:00 · 2021-07-12 16:12:32 -04:00 · 6ef6764a48
commit 6ef6764a48
parent bb17eb17fa
15 changed files with 1606 additions and 1505 deletions
--- a/app/App.js
+++ b/app/App.js
@ -27,17 +27,17 @@ import Staff from './Staff'
 import OpeningPage from './OpeningPage';
 import OpenPage from './OpenPage';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-//import I18n from './i18n';
+import I18n from './i18n';
 import AsyncStorage from '@react-native-community/async-storage'

 const Tab = createBottomTabNavigator();

-/*AsyncStorage.getItem('language')
+AsyncStorage.getItem('language')
  .then((token) => { 
 	console.log("lang: " + token);
 	I18n.locale = token;
  });
-*/
+
 AsyncStorage.getItem('announcementNotifs')
 	.then((token) => { 
 	console.log("announcementNotifs: " + token);
@ -86,11 +86,11 @@ class App extends React.Component {
 						fontSize:16
 					}}}
 				>	
-					<Tab.Screen name="Home" component={Home}/>
-					<Tab.Screen name="Calendar" component={Calendar}/>
-					<Tab.Screen name="Clubs" component={Clubs}/>
-					<Tab.Screen name="Staff" component={Staff}/>
-					<Tab.Screen name="More" component={More}/>
+					<Tab.Screen name={I18n.t('app.home')} component={Home}/>
+					<Tab.Screen name={I18n.t('app.calendar')} component={Calendar}/>
+					<Tab.Screen name={I18n.t('app.clubs')} component={Clubs}/>
+					<Tab.Screen name={I18n.t('app.staff')} component={Staff}/>
+					<Tab.Screen name={I18n.t('app.more')} component={More}/>
 				</Tab.Navigator>
 				: <OpenPage />}
 			</NavigationContainer>
--- a/app/Calendar.js
+++ b/app/Calendar.js
@ -173,7 +173,7 @@ import {
 } from 'react-native/Libraries/NewAppScreen';

 import LinearGradient from 'react-native-linear-gradient';
-
+import I18n from './i18n';
 import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'

@ -282,7 +282,7 @@ class Calendar extends React.Component {
            colors={['#f99', 'white']}
            style = {{height: '100%', borderBottomColor:'black', borderBottomWidth:0.5, display: 'flex', justifyContent: 'flex-end', paddingBottom: '2.5%'}}
          >
-            <Text style = {{fontSize: 24, fontWeight: 'bold', alignSelf: 'center'}}>Calendar Events</Text>
+            <Text style = {{fontSize: 24, fontWeight: 'bold', alignSelf: 'center'}}>{I18n.t('calendar.calendarEvents')}</Text>
          </LinearGradient>
         
        </View>
--- a/app/Clubs.js
+++ b/app/Clubs.js
@ -160,7 +160,7 @@ class Clubs extends React.Component {
      <SafeAreaView style={styles.container}>
        <SearchBar
        lightTheme
-        placeholder={'Search Clubs'}
+        placeholder={I18n.t('clubs.searchClubs')}
        onChangeText={this.updateSearch}
        onCancel={this.clearSearch}
        onClear={this.clearSearch}
--- a/app/Home.js
+++ b/app/Home.js
@ -31,7 +31,7 @@ import { NavigationContainer } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
 import Announcements from './Announcements'
 import AsyncStorage from '@react-native-community/async-storage'
-//import I18n from './i18n';
+import I18n from './i18n';


 const getCurrentDate=()=>{
@ -261,7 +261,7 @@ const New = ({item}) => {
 }

 function Home1() {
-  const [modalVisible, setModalVisible] = useState(false);
+  const [modalVisible, setModalVisible] = useState(true);

  return (
    <View>
@ -350,9 +350,9 @@ function HomeScreen (props) {
    <ScrollView style={{height: '100%', backgroundColor: 'white'}}>
      <View style={{height: 275, backgroundColor: 'white', padding: '2%'}}>
        <View style={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: '2%'}}>
-          <Text style={liststyles.homeTitle}>Whats New</Text>
+          <Text style={liststyles.homeTitle}>{I18n.t('home.whatsNew')}</Text>
          <TouchableOpacity onPress={()=>props.navigation.navigate('new', {data:props.data})}>
-            <Text style={{color: 'blue', textDecorationLine: 'underline'}}>View All</Text>
+            <Text style={{color: 'blue', textDecorationLine: 'underline'}}>{I18n.t('home.viewAll')}</Text>
          </TouchableOpacity>
        </View>
        <ScrollView horizontal='true' style={{display: 'flex', flexDirection: 'row', paddingHorizontal: '2%'}}></ScrollView>
@ -368,7 +368,7 @@ function HomeScreen (props) {
      </View>

      <View style={{height: 275, backgroundColor: 'white', padding: '2%'}}>
-        <Text style={liststyles.homeTitle}>Student of the Week</Text>
+        <Text style={liststyles.homeTitle}>{I18n.t('home.SOTW')}</Text>
        <View style={{display: 'flex', flexDirection: 'row', paddingTop: '5%', paddingHorizontal: '2%', justifyContent: 'space-between'}}>
          <View style={{display: 'flex', borderWidth: 1, borderColor: 'black', borderRadius: 8, width: '32%', height: '100%'}}>
            <View style={{height:'70%'}}>
@ -376,22 +376,22 @@ function HomeScreen (props) {
            </View>
            <View style ={{paddingHorizontal: '2%', height: '15%', borderTopWidth: 1}}>
              <Text style={{fontWeight: 'bold', fontSize: 18}}>{props.studentData.name}</Text>
-              <Text>Grade {props.studentData.year}</Text>
+              <Text>{I18n.t('home.Grade')} {props.studentData.year}</Text>
            </View>
          </View>
          <View style={{borderWidth: 1, borderColor: 'black', borderRadius: 8, width: '64%', height: '100%', padding: '2%'}}>
-            <Text style={{fontSize: 16}}><Text style={{fontWeight: 'bold'}}>Hobbies: </Text>{props.studentData.hobbies}</Text>
-            <Text style={{fontSize: 16}}><Text style={{fontWeight: 'bold'}}>Achievements: </Text>{props.studentData.achievements}</Text>
-            <Text style={{fontSize: 16}}><Text style={{fontWeight: 'bold'}}>Messages: </Text>{props.studentData.messages}</Text>
+            <Text style={{fontSize: 16}}><Text style={{fontWeight: 'bold'}}>{I18n.t('home.Hobbies')} </Text>{props.studentData.hobbies}</Text>
+            <Text style={{fontSize: 16}}><Text style={{fontWeight: 'bold'}}>{I18n.t('home.Achievements')} </Text>{props.studentData.achievements}</Text>
+            <Text style={{fontSize: 16}}><Text style={{fontWeight: 'bold'}}>{I18n.t('home.Messages')} </Text>{props.studentData.messages}</Text>
          </View>
        </View>
      </View>

      <View style={{padding: '2%'}}>
        <View style ={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: '2%'}}>
-          <Text style={liststyles.homeTitle}>Announcements</Text>
+          <Text style={liststyles.homeTitle}>{I18n.t('home.Announcements')}</Text>
          <TouchableOpacity onPress={()=>props.navigation.navigate(Announcements)}>
-            <Text style={{color: 'blue', textDecorationLine: 'underline'}}>View All</Text>
+            <Text style={{color: 'blue', textDecorationLine: 'underline'}}>{I18n.t('home.viewAll')}</Text>
          </TouchableOpacity>
        </View>
        <FlatList
--- a/app/Language.js
+++ b/app/Language.js
@ -1,4 +1,4 @@
-/*import React, { Component } from 'react';
+import React, { Component } from 'react';
 import { DevSettings } from 'react-native';
 import { Platform, StyleSheet, TouchableOpacity, Text, ScrollView, View } from 'react-native';
 import I18n from './i18n';
@ -55,6 +55,7 @@ export default class extends Component {

  render() {
    return (
+      
      <View style={{flex: 1, backgroundColor: 'white', padding: 24}}>
        <Text style ={{marginBottom: 5}}>{I18n.t('language.note')}</Text>
        <View>
@ -71,4 +72,4 @@ export default class extends Component {
     </View>
   );
  }
-}*/
+}
--- a/app/More.js
+++ b/app/More.js
@ -33,7 +33,7 @@ import Settings from './Settings'
 import Poll from './Poll'
 import Images from './Images'
 import LinearGradient from 'react-native-linear-gradient'
-//import I18n from './i18n';
+import I18n from './i18n';

 const Stack = createStackNavigator()

@ -51,8 +51,8 @@ class MoreSwitch extends React.Component {
 						{name:'Announcements',key:"announce", img:Images.announcements},
 						{name:"Resources",key:"resources", img:Images.resources},
 						{name:"SOTW",key:"studentweek", img:Images.student},
-						{name:"Lunch",key:"lunchevent", img:Images.lunch},
-						{name:"SSL",key:"sslopps", img:Images.sslopps},
+						{name:"lunch",key:"lunchevent", img:Images.lunch},
+						{name:"ssl",key:"sslopps", img:Images.sslopps},
 						{name:"COTW",key:"challengeweek", img:Images.challenge},
 						{name:"Polls", key:"polls", img: Images.polls},
 						{name:"Settings", key:"settings", img: Images.settings},
@ -61,7 +61,7 @@ class MoreSwitch extends React.Component {
 						
 						<TouchableOpacity style={styles.moreitem} onPress={()=>this.props.navigation.navigate(item.key)}>
 							<Image source = {item.img} style = {{height: 40, width: 40, marginRight: 10, tintColor: '#e3e3e3'}}/>
-							<Text style={styles.moretext}>{item.name}</Text>
+							<Text style={styles.moretext}>{I18n.t('more.'+item.name)}</Text>
 						</TouchableOpacity>
 					}
 				/>
@ -84,7 +84,7 @@ class More extends React.Component {
 						name="Chooser" 
 						component={MoreSwitch}
 						options={{
-							title:"More",
+							title:I18n.t('more.More'),
 							headerTitleStyle:styles.headerTitle,
 							headerBackground: ()=>background
 						}}
@ -93,7 +93,7 @@ class More extends React.Component {
 						name="announce" 
 						component={Announcements}
 						options={{
-							title:"Announcements",
+							title:I18n.t('more.Announcements'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
@ -103,7 +103,7 @@ class More extends React.Component {
 						name="resources" 
 						component={Resources}
 						options={{
-							title:"Resources",
+							title:I18n.t('more.Resources'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
@ -113,7 +113,7 @@ class More extends React.Component {
 						name="studentweek" 
 						component={StudentWeek}
 						options={{
-							title:"Student of the Week",
+							title:I18n.t('more.SOTW'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
@ -123,7 +123,7 @@ class More extends React.Component {
 						name="lunchevent" 
 						component={LunchEvents}
 						options={{
-							title:"Lunch",
+							title:I18n.t('more.lunch'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
@ -133,7 +133,7 @@ class More extends React.Component {
 						name="sslopps" 
 						component={SSLOps}
 						options={{
-							title:"SSL Ops",
+							title:I18n.t('more.ssl'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
@ -143,7 +143,7 @@ class More extends React.Component {
 						name="challengeweek" 
 						component={ChallengeWeek}
 						options={{
-							title:"Challenge of the Week",
+							title:I18n.t('more.COTW'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
@ -153,7 +153,7 @@ class More extends React.Component {
 						name="polls" 
 						component={Poll}
 						options={{
-							title:"Polls",
+							title:I18n.t('more.Polls'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
@ -163,10 +163,11 @@ class More extends React.Component {
 						name="settings" 
 						component={Settings}
 						options={{
-							title:"Settings",
+							title:I18n.t('more.Settings'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
-							headerBackground: ()=>background
+							headerBackground: ()=>background,
+							headerShown:false
 						}}
 					/>
 					<Stack.Screen 
--- a/app/Notifications.js
+++ b/app/Notifications.js
@ -1,4 +1,4 @@
-/*import React, { Component, useState } from 'react';
+import React, { Component, useState } from 'react';
 import { 
    Platform, 
    StyleSheet, 
@ -110,13 +110,17 @@ class Notifications extends Component {
  render() {

    return (
-
-        <View style = {{flex: 1, backgroundColor: 'white', padding: 20}}>
+        <View>
+            <Text>
+                Notifs
+            </Text>
+        </View>
+        /*<View style = {{flex: 1, backgroundColor: 'white', padding: 20}}>
            <AnnouncementNotifs />
            <EventNotifs />
-        </View>
+        </View>*/
   );
  }
 }

-export default Notifications*/
+export default Notifications
--- a/app/Settings.js
+++ b/app/Settings.js
@ -26,9 +26,9 @@ import LinearGradient from 'react-native-linear-gradient'
 import Images from './Images'
 import { NavigationContainer } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
-//import I18n from './i18n';
-//import Language from './Language'
-//import Notifications from './Notifications'
+import I18n from './i18n';
+import Language from './Language'
+import Notifications from './Notifications'

 const Stack = createStackNavigator()

@ -50,7 +50,7 @@ class placeHoldingForNow extends React.Component{
 		)
 	}
 }
-/*class SettingSwitch extends React.Component {
+class SettingSwitch extends React.Component {
 	constructor(props) {
 		super(props)
 		this.props = props
@ -61,12 +61,15 @@ class placeHoldingForNow extends React.Component{
 			<View style={{flex:1,backgroundColor:'red'}}>
 				<FlatList
 					data={[
-						//{name:"Language",key:"language", img:Images.lang}
+						{name:"Language",key:"language", img:Images.lang},
 						//{name:"Notifications",key:"notifications", img:Images.notifs},
+						//{name:"Language",key:"language", img:Images.lang}
+						//{name:"Notifications",key:"notifications", img:Images.notifs},\
 					]}
 					renderItem={({item})=>
 						<TouchableOpacity style={styles.moreitem} onPress={()=>this.props.navigation.navigate(item.key)}>
 							<Image source = {item.img} style = {{height: 40, width: 40, marginRight: 10, tintColor: '#e3e3e3'}}/>
+							
 							<Text style={styles.moretext}>{I18n.t('settings.' + item.key)}</Text>
 						</TouchableOpacity>
 					}
@ -75,7 +78,7 @@ class placeHoldingForNow extends React.Component{
 		)
 	}
 }
-*/
+
 const background = (<LinearGradient
                    colors={['#f99', 'white']}
                    style = {{flex:1,borderBottomColor:'black',borderBottomWidth:0.5}}
@ -84,44 +87,35 @@ const background = (<LinearGradient
 class Settings extends React.Component {
 	render() {
 		return (
-			<View style={{flex:1,backgroundColor:'red'}}>
+			/*<View style={{flex:1,backgroundColor:'red'}}>
 				<Text>
 					Coming Soon...
 				</Text>
-			</View>
-			/*<NavigationContainer independent={true}>
+			</View>*/
+			<NavigationContainer independent={true}>
 				<Stack.Navigator>
 					<Stack.Screen 
 						name="Chooser" 
-						component={placeHoldingForNow}
+						component={SettingSwitch}
 						options={{
-							title:'Settings',
+							title:I18n.t('more.Settings'),
 							headerTitleStyle:styles.headerTitle,
-							headerBackground: ()=>background
-						}}
-					/>
-					{/*<Stack.Screen 
-						name="language" 
-						component={Language}
-						options={{
-							title:'Language',
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
 						}}
-					/>}*/
-					/*{<Stack.Screen 
-						name="notifications" 
-						component={Notifications}
+					/>
+					{<Stack.Screen 
+						name="language" 
+						component={Language}
 						options={{
-							title:'Notifications',
+							title:I18n.t('settings.language'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
 						}}
 					/>}
 				</Stack.Navigator>
-			</NavigationContainer>*/
+			</NavigationContainer>
 		)
 	}
 }
--- a/app/Staff.js
+++ b/app/Staff.js
@ -23,7 +23,7 @@ import {
 import { SearchBar } from 'react-native-elements';
 import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
-//import I18n from './i18n';
+import I18n from './i18n';

 const StaffElement = ({item}) => {
  const [visible, setVisible] = useState(false)
@ -108,7 +108,7 @@ class Staff extends React.Component {
      <SafeAreaView style={styles.container}>
        <SearchBar
        lightTheme
-        placeholder="Staff Search"
+        placeholder={I18n.t('staff.searchStaff')}
        onChangeText={this.updateSearch}
        onCancel={this.clearSearch}
        onClear={this.clearSearch}
--- a/app/StudentWeek.js
+++ b/app/StudentWeek.js
@ -16,7 +16,7 @@ import {
  DebugInstructions,
  ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
-//import I18n from './i18n';
+import I18n from './i18n';
 import { url } from './resources/fetchInfo.json'

 class StudentWeek extends React.Component {
@ -49,7 +49,7 @@ class StudentWeek extends React.Component {
 					<View style = {{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
 						<View>
 							<Text style={{fontSize:28,marginBottom:'10%',textAlign:'center'}}>{this.state.data.name}</Text>	
-							<Text style={{fontSize:20}}>{'\t'}Grade: {this.state.data.year}</Text>
+							<Text style={{fontSize:20}}>{'\t'}{I18n.t('student.Grade')} {this.state.data.year}</Text>
 						</View>
 						<View style = {{height: 150, width: 150}}>
 							<Image style = {{height: '100%', width:'100%', borderRadius: 6}}source={{iconURI}} />
@ -59,15 +59,15 @@ class StudentWeek extends React.Component {
 					
 					<View style = {{paddingTop:'10%', height: '55%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
 						<View>
-							<Text style={{fontSize: 20, fontWeight: 'bold'}}>{"\n"}Hobbies:</Text>
+							<Text style={{fontSize: 20, fontWeight: 'bold'}}>{"\n"}{I18n.t('student.Hobbies')}</Text>
 							<Text style={{fontSize: 20}}>{'\t'}{this.state.data.hobbies}</Text>
 						</View>
 						<View>
-							<Text style={{fontSize: 20, fontWeight: 'bold'}}>{"\n"}Achievements: </Text>
+							<Text style={{fontSize: 20, fontWeight: 'bold'}}>{"\n"}{I18n.t('student.Achievements')} </Text>
 							<Text style={{fontSize: 20}}>{'\t'}{this.state.data.achievements}</Text>
 						</View>
 						<View>
-							<Text style={{fontSize: 20, fontWeight: 'bold'}}>{"\n"}Messages:</Text>
+							<Text style={{fontSize: 20, fontWeight: 'bold'}}>{I18n.t('student.Messages')}</Text>
 							<Text style={{fontSize: 20}}>{'\t'}{this.state.data.messages}</Text>
 						</View>
 					</View>
--- a/app/i18n.js
+++ b/app/i18n.js
@ -1,12 +1,12 @@
-//'use strict';
-//import I18n from 'react-native-i18n';
-//import en from './Languages/en'
-//import es from './Languages/es'
+'use strict';
+import I18n from 'react-native-i18n';
+import en from './Languages/en'
+import es from './Languages/es'

-//I18n.fallbacks = true;
-//I18n.translations = {
-  //en,
-  //es,
-//};
+I18n.fallbacks = true;
+I18n.translations = {
+  en,
+  es,
+};

-//export default I18n;
+export default I18n;
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@ -319,6 +319,10 @@ PODS:
    - React
  - RNGestureHandler (1.10.3):
    - React-Core
+  - RNI18n (2.0.15):
+    - React
+  - RNLocalize (2.1.1):
+    - React-Core
  - RNScreens (3.4.0):
    - React-Core
    - React-RCTImage
@ -382,6 +386,8 @@ DEPENDENCIES:
  - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
  - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNI18n (from `../node_modules/react-native-i18n`)
+  - RNLocalize (from `../node_modules/react-native-localize`)
  - RNScreens (from `../node_modules/react-native-screens`)
  - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
  - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@ -466,6 +472,10 @@ EXTERNAL SOURCES:
    :path: "../node_modules/@react-native-community/masked-view"
  RNGestureHandler:
    :path: "../node_modules/react-native-gesture-handler"
+  RNI18n:
+    :path: "../node_modules/react-native-i18n"
+  RNLocalize:
+    :path: "../node_modules/react-native-localize"
  RNScreens:
    :path: "../node_modules/react-native-screens"
  RNVectorIcons:
@ -517,6 +527,8 @@ SPEC CHECKSUMS:
  RNCAsyncStorage: dfcd17ecff5403061bc649ee33ee751718870c8a
  RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
  RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+  RNI18n: e2f7e76389fcc6e84f2c8733ea89b92502351fd8
+  RNLocalize: 82a569022724d35461e2dc5b5d015a13c3ca995b
  RNScreens: 21b73c94c9117e1110a79ee0ee80c93ccefed8ce
  RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
  Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
--- a/package-lock.json
+++ b/package-lock.json
@ -15,13 +15,16 @@
        "@react-navigation/stack": "^5.9.0",
        "@vitalets/google-translate-api": "^4.0.0",
        "events": "^3.2.0",
+        "i18next": "^20.3.2",
        "querystring": "^0.2.0",
        "react": "16.13.1",
        "react-native": "^0.63.2",
        "react-native-elements": "^2.2.0",
        "react-native-gesture-handler": "^1.10.3",
+        "react-native-i18n": "^2.0.15",
        "react-native-linear-gradient": "^2.5.6",
        "react-native-locale-detector": "^1.0.1",
+        "react-native-localize": "^2.1.1",
        "react-native-safe-area-context": "^3.2.0",
        "react-native-screens": "^3.4.0",
        "react-native-splash-screen": "^3.2.0",
@ -7072,6 +7075,30 @@
        "node": ">=8.12.0"
      }
    },
+    "node_modules/i18n-js": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/i18n-js/-/i18n-js-3.0.11.tgz",
+      "integrity": "sha512-v7dG3kYJTQTyox3NqDabPDE/ZotWntyMI9kh4cYi+XlCSnsIR+KBTS2opPyObL8WndnklcLzbNU92FP/mLge3Q=="
+    },
+    "node_modules/i18next": {
+      "version": "20.3.2",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-20.3.2.tgz",
+      "integrity": "sha512-e8CML2R9Ng2sSQOM80wb/PrM2j8mDm84o/T4Amzn9ArVyNX5/ENWxxAXkRpZdTQNDaxKImF93Wep4mAoozFrKw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0"
+      }
+    },
+    "node_modules/i18next/node_modules/@babel/runtime": {
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
+      "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
    "node_modules/iconv-lite": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -12518,6 +12545,14 @@
        "asap": "~2.0.3"
      }
    },
+    "node_modules/react-native-i18n": {
+      "version": "2.0.15",
+      "resolved": "https://registry.npmjs.org/react-native-i18n/-/react-native-i18n-2.0.15.tgz",
+      "integrity": "sha512-V8VwUP0TLda3oJvgt5tdnFaOV7WXPhTjCTLO7sXI3C2SHggSbD4bCUryMzNJhesimJidH21V2Owvj4zAylHoQQ==",
+      "dependencies": {
+        "i18n-js": "3.0.11"
+      }
+    },
    "node_modules/react-native-iphone-x-helper": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
@ -12539,6 +12574,14 @@
      "resolved": "https://registry.npmjs.org/react-native-locale-detector/-/react-native-locale-detector-1.0.1.tgz",
      "integrity": "sha1-wAImHstgYZ5ZUiV8jH+jHCwV7TA="
    },
+    "node_modules/react-native-localize": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-localize/-/react-native-localize-2.1.1.tgz",
+      "integrity": "sha512-+uyz2/b0vyLq19fcb7r1qU1gqmzbp3aC6EMTvOVXwfBuiN+aJXR/fDdFOJJ8D7+bLccKeuS2zBDrazh+ZayX/g==",
+      "peerDependencies": {
+        "react-native": ">=0.60.0"
+      }
+    },
    "node_modules/react-native-ratings": {
      "version": "7.6.1",
      "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-7.6.1.tgz",
@ -20804,6 +20847,29 @@
      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
      "dev": true
    },
+    "i18n-js": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/i18n-js/-/i18n-js-3.0.11.tgz",
+      "integrity": "sha512-v7dG3kYJTQTyox3NqDabPDE/ZotWntyMI9kh4cYi+XlCSnsIR+KBTS2opPyObL8WndnklcLzbNU92FP/mLge3Q=="
+    },
+    "i18next": {
+      "version": "20.3.2",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-20.3.2.tgz",
+      "integrity": "sha512-e8CML2R9Ng2sSQOM80wb/PrM2j8mDm84o/T4Amzn9ArVyNX5/ENWxxAXkRpZdTQNDaxKImF93Wep4mAoozFrKw==",
+      "requires": {
+        "@babel/runtime": "^7.12.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.14.6",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
+          "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
    "iconv-lite": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -25098,6 +25164,14 @@
        }
      }
    },
+    "react-native-i18n": {
+      "version": "2.0.15",
+      "resolved": "https://registry.npmjs.org/react-native-i18n/-/react-native-i18n-2.0.15.tgz",
+      "integrity": "sha512-V8VwUP0TLda3oJvgt5tdnFaOV7WXPhTjCTLO7sXI3C2SHggSbD4bCUryMzNJhesimJidH21V2Owvj4zAylHoQQ==",
+      "requires": {
+        "i18n-js": "3.0.11"
+      }
+    },
    "react-native-iphone-x-helper": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
@ -25115,6 +25189,12 @@
      "resolved": "https://registry.npmjs.org/react-native-locale-detector/-/react-native-locale-detector-1.0.1.tgz",
      "integrity": "sha1-wAImHstgYZ5ZUiV8jH+jHCwV7TA="
    },
+    "react-native-localize": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-localize/-/react-native-localize-2.1.1.tgz",
+      "integrity": "sha512-+uyz2/b0vyLq19fcb7r1qU1gqmzbp3aC6EMTvOVXwfBuiN+aJXR/fDdFOJJ8D7+bLccKeuS2zBDrazh+ZayX/g==",
+      "requires": {}
+    },
    "react-native-ratings": {
      "version": "7.6.1",
      "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-7.6.1.tgz",
--- a/package.json
+++ b/package.json
@ -18,13 +18,16 @@
    "@react-navigation/stack": "^5.9.0",
    "@vitalets/google-translate-api": "^4.0.0",
    "events": "^3.2.0",
+    "i18next": "^20.3.2",
    "querystring": "^0.2.0",
    "react": "16.13.1",
    "react-native": "^0.63.2",
    "react-native-elements": "^2.2.0",
    "react-native-gesture-handler": "^1.10.3",
+    "react-native-i18n": "^2.0.15",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-locale-detector": "^1.0.1",
+    "react-native-localize": "^2.1.1",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.4.0",
    "react-native-splash-screen": "^3.2.0",
--- a/yarn.lock
+++ b/yarn.lock