home pg + language

2024-10-17 21:40:51 -04:00 · 2021-08-17 21:18:32 -04:00 · 2021-08-17 21:18:32 -04:00 · 6fd0056c89
commit 6fd0056c89
parent 38d07e8747
30 changed files with 2368 additions and 2275 deletions
--- a/android/app/src/main/java/com/blazerapp/MainApplication.java
+++ b/android/app/src/main/java/com/blazerapp/MainApplication.java
@ -4,6 +4,7 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.zoontek.rnlocalize.RNLocalizePackage;
 import com.reactnativecommunity.webview.RNCWebViewPackage;
 import com.reactnativecommunity.webview.RNCWebViewPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
--- a/android/settings.gradle
+++ b/android/settings.gradle
@ -1,4 +1,6 @@
 rootProject.name = 'blazerapp'
+include ':react-native-localize'
+project(':react-native-localize').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-localize/android')
 include ':react-native-webview'
 project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
 include ':react-native-webview'
--- a/app/Announcements.js
+++ b/app/Announcements.js
@ -25,21 +25,22 @@ import Icon from 'react-native-vector-icons/AntDesign'
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import LinearGradient from 'react-native-linear-gradient';
+import I18n from './i18n';

 const STORAGE_KEY = "teacherAnnouncements"

 const getCurrentDate=()=>{
 	var date = new Date().getDate();
-	var month = new Date().getMonth() + 1;
+	var month = new Date().getMonth();
 	var year = new Date().getFullYear();

 	return new Date(year, month, date);
 }

 const Announcement = ({item}) => {
-	const date = new Date
-	const dateStr = `${date.getMonth()+1}/${date.getDate()}/${date.getFullYear()}`
-	const dateInfo = dateStr===item.item.date&&item.item.time!==undefined?item.item.time:item.item.date;
+	const todayDate = getCurrentDate()
+	const itemDate = new Date(item.item.date)
+	const dateInfo = todayDate.getTime()===itemDate.getTime()&&item.item.time!==undefined?item.item.time:(item.item.date+", " + item.item.time)
 	return (
 		<View style={{borderWidth: 1, borderColor: '#323232', padding: '2%', marginHorizontal: '2%', marginBottom: '2%', borderRadius: 12}}>
 			<View style = {{display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
@ -52,6 +53,21 @@ const Announcement = ({item}) => {
 	)
 }

+function NewTeacherList(props) {
+	return (
+	  <View>
+		<LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
+		  <Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>{I18n.t('dates.'+props.name)}</Text>
+		</LinearGradient>
+		<FlatList
+		  data={props.list}
+		  renderItem={item=><Announcement item={item}/>} 
+		  keyExtractor={item=>JSON.stringify(item)}
+		/>
+	  </View>
+	)
+  }
+
 export const TeacherList = ({route}) => {
 	const todayDate = getCurrentDate()
 	const weekPastDate = new Date();
@ -69,14 +85,14 @@ export const TeacherList = ({route}) => {
 	
 	for (var i = 0; i < route.params.data.length; i++) {
 		const itemDate = new Date(route.params.data[i].date)
-		if (itemDate == todayDate) {
+		if (itemDate.getTime() == todayDate.getTime()) {
 			today.push(route.params.data[i])
 		}
-		else if (itemDate > todayDate && itemDate <= weekFutureDate) {
+		else if (itemDate.getTime() > todayDate.getTime() && itemDate.getTime() <= weekFutureDate.getTime()) {
 			future.push(route.params.data[i])
 		}
 		//else if (itemDate >= weekPastDate && itemDate < todayDate) {
-		else if (itemDate < todayDate) {
+		else if (itemDate.getTime() < todayDate.getTime()) {
 			past.push(route.params.data[i])
 		}
 	}
@ -87,37 +103,10 @@ export const TeacherList = ({route}) => {

 	return (
 		<ScrollView style={{flex:1, backgroundColor: 'white'}}>
-			{todayBoolean?<View>
-				<LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
-					<Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Today</Text>
-				</LinearGradient>
-				<FlatList
-					data={today}
-					renderItem={item=><Announcement item={item}/>} 
-					keyExtractor={item=>JSON.stringify(item)}
-				/>
-			</View>: <></>}
-			{pastBoolean?<View>
-				<LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
-					<Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Past</Text>
-				</LinearGradient>
-				<FlatList
-					data={past}
-					renderItem={item=><Announcement item={item}/>} 
-					keyExtractor={item=>JSON.stringify(item)}
-				/>
-			</View>:<></>}
-			{futureBoolean?<View>
-				<LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
-					<Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Future</Text>
-				</LinearGradient>
-				<FlatList
-					data={future}
-					renderItem={item=><Announcement item={item}/>} 
-					keyExtractor={item=>JSON.stringify(item)}
-				/>
-			</View>:<></>}
-			{!noAnn?<Text style={{textAlign: 'center', fontSize: 20, paddingTop: '2%'}}>No Announcements</Text>:<></>}
+			{todayBoolean?<NewTeacherList name = 'today' list = {today} />:<></>}
+			{pastBoolean?<NewTeacherList name = 'past' list = {past} />:<></>}
+			{futureBoolean?<NewTeacherList name = 'future' list = {future} />:<></>}
+			{!noAnn?<Text style={{textAlign: 'center', fontSize: 20, paddingTop: '2%'}}>{I18n.t('announcements.noAnnouncements')}</Text>:<></>}
 		</ScrollView>
 	)
 }
--- a/app/App.js
+++ b/app/App.js
@ -27,25 +27,18 @@ 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 AsyncStorage from '@react-native-community/async-storage'
+import I18n from './i18n.js'
+import AsyncStorage from '@react-native-async-storage/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);
-	});
-AsyncStorage.getItem('eventNotifs')
-	.then((token) => { 
-	console.log("eventNotifs: " + token);
-	});
+

 class App extends React.Component {
 	state = {
@ -86,11 +79,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
@ -22,6 +22,7 @@ import { createStackNavigator } from '@react-navigation/stack'
 import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
 import morestyles from './styles/morestyles'
+import I18n from './i18n.js'

 const Stack = createStackNavigator();

@ -42,38 +43,36 @@ export const EventInfo = ({route}) => {
  const date = itemDate.getDate()
  
  return (
-    <View style = {{backgroundColor: 'white', flex:1}}>
-      <View style={{padding: '5%'}}>
+    <ScrollView style = {{backgroundColor: 'white', flex:1, padding: '5%', paddingRight: '10%'}}>
      <View style={{marginBottom: '7%'}}>
-          <Text style={[styles.title, {fontWeight: 'bold', marginBottom: '2%'}]}>Info</Text>
+        <Text style={[styles.title, {fontWeight: 'bold', marginBottom: '2%'}]}>{I18n.t('calendar.info')}</Text>
        <Text style={[styles.title, {fontWeight: '200'}]}>{item.text}</Text>
      </View>
+      <View style={{}}>
        <View style={{display: 'flex', flexDirection: 'row', marginBottom: '5%'}}>
          <Ionicons name='location-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
-          <View style={{display: 'flex'}}>
-            <Text style={{fontSize: 16}}>Location</Text>
+          <View style={{display: 'flex', marginLeft: -15, paddingHorizontal: '5%'}}>
+            <Text style={{fontSize: 16}}>{I18n.t('calendar.location')}</Text>
            <Text style={[styles.title, {fontSize: 16, fontWeight: '200'}]}>{item.location}</Text>
          </View>
        </View>
        <View style={{display: 'flex', flexDirection: 'row', marginBottom: '5%'}}>
          <Ionicons name='time-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
-          <View style={{display: 'flex'}}>
-            <Text style={{fontSize: 16}}>Date</Text>
+          <View style={{display: 'flex', marginLeft: -15, paddingHorizontal: '5%'}}>
+            <Text style={{fontSize: 16}}>{I18n.t('calendar.date')}</Text>
            <Text style={[styles.title, {fontSize: 16, fontWeight: '200'}]}>{dayOfWeek}, {month} {date}</Text>
          </View>
        </View>
        <View style={{display: 'flex', flexDirection: 'row'}}>
          <Ionicons name='person-circle-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
-          <View style={{display: 'flex'}}>
-            <Text style={{fontSize: 16}}>Organizer</Text>
+          <View style={{display: 'flex', marginLeft: -15, paddingHorizontal: '5%'}}>
+            <Text style={{fontSize: 16}}>{I18n.t('calendar.organizer')}</Text>
            <Text style={[styles.title, {fontSize: 16, fontWeight: '200'}]}>{item.name}</Text>
            <Text style={[styles.title, {fontSize: 16, fontWeight: '200', textDecorationLine: 'underline'}]}>{item.emails}</Text>
          </View>
        </View>
      </View>
-      
-      
-    </View>
+    </ScrollView>
  )
 }
 const Event = (props) => {
@ -82,7 +81,7 @@ const Event = (props) => {

  return (
    <View>
-      <TouchableOpacity style={[styles.listItem, {padding: '2%'}]} onPress={()=>props.navigation.navigate('EventInfo', {data:props.data,name:props.name, title: item.item.title,text:item.item.text,location:item.item.location,date:item.item.date, name:item.item.name, emails: item.item.emails})} activeOpacity={0.8}>
+      <TouchableOpacity style={[styles.listItem, {padding: '2%'}]} onPress={()=>props.navigation.navigate('EventInfo', {data:props.data, title: item.item.title,text:item.item.text,location:item.item.location,date:item.item.date, name:item.item.name, emails: item.item.emails})} activeOpacity={0.8}>
        <View style = {[styles.container2, {justifyContent: 'space-between'}]}>
          <View style={{display: 'flex', flexDirection: 'row'}}>
            <Ionicons name='calendar' size={32} color={'#323232'} style={{marginRight: 15}}/>
@ -108,17 +107,18 @@ function CalendarEvents () {
    <NavigationContainer independent={true}>
      <Stack.Navigator>
        <Stack.Screen 
-          name = "Calendar"
+          name = {I18n.t('calendar.calendar')}
          component = {Calendar}
          options={({
            headerShown: true,
            headerTitleStyle:morestyles.headerTitle,
            headerBackground: ()=>background,
-            headerleft: null,
-            headerTitleAlign: 'center'
+            //headerLeft: null,
+            headerTitleAlign: 'center',
+            headerBackTitleVisible:false,
+            headerTintColor: 'black'
          })}
        />
-        
        <Stack.Screen 
          name = "EventInfo"
          component = {EventInfo}
@ -126,8 +126,10 @@ function CalendarEvents () {
            title:route.params.title,
            headerTitleStyle:morestyles.headerTitle,
            headerBackground: ()=>background,
-            headerleft: null,
-            headerTitleAlign: 'center'
+            //headerLeft: null,
+            headerTitleAlign: 'center',
+            headerBackTitleVisible:false,
+            headerTintColor: 'black'
          })}
        />
      </Stack.Navigator>
@ -135,6 +137,21 @@ function CalendarEvents () {
  ) 
 }

+function NewCalendarCategory (props) {
+  return (
+    <View>
+      <LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
+        <Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>{I18n.t('dates.'+props.name)}</Text>
+      </LinearGradient>
+      <FlatList
+        data={props.list}
+        renderItem={item=><Event item={item} name={props.itemname} navigation={props.navigation}/>} 
+        keyExtractor={item=>JSON.stringify(item)}
+      />
+    </View>
+  )
+}
+
 class Calendar extends React.Component {

 	constructor(props) {
@ -205,37 +222,10 @@ class Calendar extends React.Component {
    var noAnn = (todayBoolean||pastBoolean||futureBoolean)
 		return (
 			<ScrollView style={{flex:1, backgroundColor: 'white'}}>
-        {todayBoolean?<View>
-          <LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
-            <Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Today</Text>
-          </LinearGradient>
-          <FlatList
-            data={today}
-            renderItem={item=><Event item={item} name={item.name} navigation={this.props.navigation}/>} 
-            keyExtractor={item=>JSON.stringify(item)}
-          />
-        </View>: <></>}
-        {pastBoolean?<View>
-          <LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
-            <Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Past</Text>
-          </LinearGradient>
-          <FlatList
-            data={past}
-            renderItem={item=><Event item={item} name={item.name} navigation={this.props.navigation}/>} 
-            keyExtractor={item=>JSON.stringify(item)}
-          />
-        </View>:<></>}
-        {futureBoolean?<View>
-          <LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
-            <Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Future</Text>
-          </LinearGradient>
-          <FlatList
-            data={future}
-            renderItem={item=><Event item={item} name={item.name} navigation={this.props.navigation}/>} 
-            keyExtractor={item=>JSON.stringify(item)}
-          />
-        </View>:<></>}
-        {!noAnn?<Text style={{textAlign: 'center', fontSize: 20, paddingTop: '2%'}}>No Events</Text>:<></>}
+        {todayBoolean?<NewCalendarCategory name = 'today' list = {today} navigation={this.props.navigation} />: <></>}
+        {pastBoolean?<NewCalendarCategory name = 'past' list = {past} navigation={this.props.navigation} />: <></>}
+        {futureBoolean?<NewCalendarCategory name = 'future' list = {future} navigation={this.props.navigation} />: <></>}
+        {!noAnn?<Text style={{textAlign: 'center', fontSize: 20, paddingTop: '2%'}}>{I18n.t('calendar.noEvents')}</Text>:<></>}
      </ScrollView>
 		)
  }
--- a/app/ChallengeWeek.js
+++ b/app/ChallengeWeek.js
@ -21,6 +21,7 @@ import {
 } from 'react-native/Libraries/NewAppScreen';
 import styles from './styles/liststyles';
 import { url } from './resources/fetchInfo.json'
+import I18n from 'i18n-js';

 class ChallengeWeek extends React.Component {
 	constructor(props) {
@ -42,7 +43,7 @@ class ChallengeWeek extends React.Component {
 			this.setState({data: JSON.parse(json),isLoading:false});
 		}).catch((error) => console.error(error))

-		this.animatedValue=new Animated.Value(0);
+		/*this.animatedValue=new Animated.Value(0);
 		this.value=0;
 		this.animatedValue.addListener(({value}) => {
 			this.value=value;
@ -54,10 +55,10 @@ class ChallengeWeek extends React.Component {
 		this.backInterpolate = this.animatedValue.interpolate({
 			inputRange:[0,180],
 			outputRange: ['180deg','360deg']
-		})
+		})*/
 	}

-	flipCard() {
+	/*flipCard() {
 		if (this.value >= 90) {
 			Animated.spring(this.animatedValue, {
 				toValue:0,
@ -73,10 +74,10 @@ class ChallengeWeek extends React.Component {
 			}).start();
 		}
 		this.setState({flip:!this.state.flip})
-	}
+	}*/
 	
 	render() {
-		const frontAnimatedStyle = {
+		{/*const frontAnimatedStyle = {
 			transform: [
 				{rotateY:this.frontInterpolate}
 			]
@ -95,7 +96,7 @@ class ChallengeWeek extends React.Component {
 		else {
 			styling=({display:'none'})
 			styling2=({height: '100%', width: '100%', backgroundColor: 'white', borderRadius: 20, textAlign: 'center', display: 'flex', alignContent: 'center', padding: '5%', paddingTop: '15%', borderColor: 'red', borderWidth: 1})
-		}
+		}*/}
 		
 		if (this.state.isLoading) {
 			return <View/>
@ -104,23 +105,7 @@ class ChallengeWeek extends React.Component {
 				<View style={{alignItems:'center',paddingiorizontal:'10%', height: '100%', backgroundColor: 'white', justifyContent: 'center', padding: '2%'}}>
 					<Text style={{fontSize: 32, fontWeight: 'bold', marginBottom: '10%', color: 'red', textAlign: 'center'}}>{this.state.data.title}</Text>
 					<Text style={{textAlign:'center', fontSize: 24, marginBottom: '5%', textAlign: 'center', fontWeight: '200'}}>{this.state.data.text}</Text>
-					<Text style={{textAlign:'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: "solid", textDecorationColor: "#000"}} onPress={() => Linking.openURL(this.state.data.link)}>Link</Text>
-					{/*<TouchableOpacity onPress={()=>this.flipCard()} style={{height: '70%', width: '80%', borderRadius: 20, shadowColor: 'red', shadowOffset: {width: 0, height: 2}, shadowOpacity: 0.5, shadowRadius: 7, alignSelf: 'center'}}>
-						<Animated.View style={{backfaceVisibility: 'hidden'}, frontAnimatedStyle}>
-							<View style={styling}>
-								<View>{this.state.flip?<Text style={{textAlign: 'center', fontSize: 28}}>{this.state.data.title}</Text>:<></>}</View>
-								<Image source={require('./assets/blair_logo.png')} style = {{height: 200, width: 200, alignSelf: 'center', position: 'absolute', bottom: '20%'}}/>
-								<Image source={require('./assets/arrow_right.png')} style = {{alignSelf: 'center', position: 'absolute', bottom: '5%'}}/>
-							</View>
-						</Animated.View>
-						<Animated.View style={backAnimatedStyle}>
-							<View style={styling2}>
-								{!this.state.flip?<Text style={{textAlign: 'center', fontSize: 28}}>{this.state.data.text}</Text>:<></>}
-								<Text style={{textAlign:'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: "solid", textDecorationColor: "#000",}} onPress={() => Linking.openURL(this.state.data.link)}>{'\n'}Link</Text>
-							</View>
-							
-						</Animated.View>
-					</TouchableOpacity>*/}
+					<Text style={{textAlign:'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: "solid", textDecorationColor: "#000"}} onPress={() => Linking.openURL(this.state.data.link)}>{I18n.t("challenge.link")}</Text>
 				</View>
 			)
 		}
--- a/app/Clubs.js
+++ b/app/Clubs.js
@ -29,50 +29,50 @@ import morestyles from './styles/morestyles'
 import { url } from './resources/fetchInfo.json'
 import LinearGradient from 'react-native-linear-gradient';
 import I18n from './i18n';
+import Ionicons from 'react-native-vector-icons/Ionicons';

 const Stack = createStackNavigator();

 export const ClubInfo = ({route}) => {
  const item = route.params;
  return (
-    <View style = {{padding: 10, backgroundColor: 'white', height: '100%'}}>
-      <View style ={[styles.infoContainer, {flexDirection: 'row', alignItems: 'center'}]}>
-        <View style={{width: '17%', display: 'flex', justifyContent: 'center'}}>
-          <Image source ={require('./assets/time.png')} style={{width: 50, height: 50}}/>
-        </View>
-        <View style={{width: '83%'}}>
-          <Text style = {{fontSize:20}}>{item.meeting}</Text>
+    <ScrollView style = {{backgroundColor: 'white', flex:1, padding: '5%', paddingRight: '10%'}}>
+      <View style={{display: 'flex', flexDirection: 'row', marginBottom: '5%'}}>
+        <Ionicons name='location-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
+        <View style={{display: 'flex', marginLeft: -15, paddingHorizontal: '5%'}}>
+          <Text style={{fontSize: 16}}>Meeting Location </Text>
+          <Text style={[styles.title, styles.linktext, {fontSize: 16, fontWeight: '200'}]} onPress={() => Linking.openURL(item.link)}>{item.link}</Text>
        </View>
      </View>
-      <View style ={[styles.infoContainer, {flexDirection: 'row', alignItems: 'center'}]}>
-        <View style={{width: '17%', display: 'flex', justifyContent: 'center'}}>
-          <Image source ={require('./assets/zoom.png')} style={{width: 50, height: 50}}/>
-        </View>
-        <View style={{width: '83%'}}>
-          <Text style = {[styles.linktext,{fontSize:20}]} onPress={() => Linking.openURL(item.link)}>{item.link}</Text>
+      <View style={{display: 'flex', flexDirection: 'row', marginBottom: '5%'}}>
+        <Ionicons name='time-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
+        <View style={{display: 'flex'}}>
+          <Text style={{fontSize: 16}}>Meeting Date</Text>
+          <Text style={[styles.title, {fontSize: 16, fontWeight: '200'}]}>{item.meeting}</Text>
        </View>
      </View>
-			<View style ={[styles.infoContainer, {flexDirection: 'row', alignItems: 'center'}]}>
-        <View style={{width: '17%', display: 'flex', justifyContent: 'center'}}>
-          <Image source ={require('./assets/sponsor.png')} style={{width: 50, height: 50}}/>
-        </View>
-        <View style={{width: '83%'}}>
-          <Text style = {{fontSize:20}}>{item.sponsor}</Text>
-        </View>
+      <View style={{display: 'flex', flexDirection: 'row'}}>
+        <Ionicons name='person-circle-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
+        <View style={{display: 'flex'}}>
+          <Text style={{fontSize: 16}}>Sponsor</Text>
+          <Text style={[styles.title, {fontSize: 16, fontWeight: '200'}]}>{item.sponsor}</Text>
        </View>
      </View>
+    </ScrollView>
  )
 }
 function ClubElement (props) {
  const item = props.item;
  return(
 	<View>
-      <TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('ClubInfo', {data:props.data,name:props.name,meeting:item.meeting,link:item.link,sponsor:item.sponsor})} activeOpacity={0.8}>
-        <View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
-          <Image source = {require('./assets/clubs.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
-          <Text style={styles.title3}>{props.item.name}</Text>
+      <TouchableOpacity style={[styles.listItem]} onPress={()=>props.navigation.navigate('ClubInfo', {data:props.data,name:props.name,meeting:item.meeting,link:item.link,sponsor:item.sponsor})} activeOpacity={0.8}>
+        <View style = {[styles.container2, {justifyContent: 'space-between'}]}>
+          <View style={{display: 'flex', flexDirection: 'row'}}> 
+            <Ionicons name = "ios-people-circle-outline" size={36} color={'#323232'} style={{marginRight: 15}} />
+            <Text style={[styles.title, {alignSelf:'center'}]}>{props.item.name}</Text>
+          </View>
+          <Image source = {require('./assets/forward.png')} style={{tintColor: '#b2b2b2'}}/>
        </View>
-        
      </TouchableOpacity>
 	</View>
  )
@ -91,7 +91,14 @@ function Club () {
          name = "Clubs"
          component = {Clubs}
          options={({
-            headerShown: false
+            headerShown: true,
+            headerTitleStyle:morestyles.headerTitle,
+            headerBackground: ()=>background,
+            //headerleft: null,
+            headerTitleAlign: 'center',
+            headerBackTitleVisible:false,
+            headerTintColor: 'black',
+            title:I18n.t('app.clubs'),
          })}
        />
        <Stack.Screen 
@ -100,7 +107,10 @@ function Club () {
          options={({route})=>({
            title:route.params.name,
            headerTitleStyle:[morestyles.headerTitle,{alignSelf:'center'}],
-            headerBackground: ()=>background
+            headerBackground: ()=>background,
+            headerBackTitleVisible:false,
+            headerTintColor: 'black',
+            headerTitleAlign: 'center',
          })}
        />
      </Stack.Navigator>
@ -157,10 +167,10 @@ class Clubs extends React.Component {
    const { data , dataSearch,search} = this.state;

    return (
-      <SafeAreaView style={styles.container}>
+      <SafeAreaView style={styles.moreDefault}>
        <SearchBar
        lightTheme
-        placeholder={'Search Clubs'}
+        placeholder={I18n.t('clubs.searchClubs')}
        onChangeText={this.updateSearch}
        onCancel={this.clearSearch}
        onClear={this.clearSearch}
@ -170,7 +180,6 @@ class Clubs extends React.Component {
        renderItem={({item}) => <ClubElement item={item} name={item.name} navigation={this.props.navigation}/>}
        keyExtractor={item => JSON.stringify(item)}
      />
-      
    </SafeAreaView>
    
    );
--- a/app/Home.js
+++ b/app/Home.js
--- a/app/Images.js
+++ b/app/Images.js
@ -1,38 +0,0 @@
-import React, { useState } from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  StatusBar,
-  Modal,
-  TouchableHighlight,
-  Image,
-} from 'react-native';
-
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-import styles from './styles/morestyles'
-
-const Images = {
-}
-
-export default Images;
-/*const Images = {
-    sslopps: require('./assets/sslopps.png'),
-    lunch: require('./assets/lunch.png'),
-    settings:require('./assets/settings.png'),
-    challenge:require('./assets/challenge.png'),
-    student:require('./assets/student.png'),
-    announcements:require('./assets/announcements.png'),
-    resources:require('./assets/resources.png'),
-    polls:require('./assets/polls.png'),
-    notifs:require('./assets/notifs.png'),
-    lang:require('./assets/lang.png'),
-}*/
--- a/app/Language.js
+++ b/app/Language.js
@ -1,14 +1,14 @@
-/*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';
-import AsyncStorage from '@react-native-community/async-storage'
+import AsyncStorage from '@react-native-async-storage/async-storage'

 const STORAGE_KEY = "language"

 const language = [
-      {lang: <Text>{I18n.t('language.English')}</Text>, code: "en"},
-      {lang: <Text>{I18n.t('language.Spanish')}</Text>, code: "es"},
+      {lang: <Text>English</Text>, code: "en-US"},
+      {lang: <Text>Spanish</Text>, code: "es-US"},
    ]

 export default class extends Component {
@ -71,4 +71,4 @@ export default class extends Component {
     </View>
   );
  }
-}*/
+}
--- a/app/Languages/en.js
+++ b/app/Languages/en.js
@ -7,7 +7,20 @@ export default {
        Hobbies: "Hobbies",
        Achievements: "Achievements",
        Messages: "Messages",
-        Announcements: "Announcements"
+        Announcements: "Announcements",
+        noAnnouncements: "No Announcements",
+        lunch: "Lunch Events",
+        news: "News",
+        shortcut: "Shortcut: ",
+        seeLunch: "See Lunch Events",
+        noNews: "No news for today",
+        noAnnouncements: "No announcements for today",
+        moreOn: "More on"
+    },
+    dates: {
+        today: "Today",
+        past: "Past",
+        future: "Future"
    },
    app: {
        home: "Home",
@ -17,7 +30,12 @@ export default {
        more: "More"
    },
    calendar: {
-        calendarEvents: "Calendar Events"
+        calendar: "Calendar",
+        info: "Info",
+        location: "Location",
+        date: "Date",
+        organizer: "Organizer",
+        noEvents: "No Events"
    },
    clubs: {
        searchClubs: "Search Clubs"
@ -25,12 +43,27 @@ export default {
    staff: {
        searchStaff: "Search Staff"
    },
+    announcements: {
+        noAnnouncements: "No Announcements"
+    },
    student: {
        Grade: "Grade",
        Hobbies: "Hobbies",
        Achievements: "Achievements",
        Messages: "Messages",
    },
+    lunch: {
+        information: "Information",
+        location: "Location"
+    },
+    ssl: {
+        information: "Information",
+        sponsor: "Sponsor",
+        location: "Location"
+    },
+    challenge: {
+        link: "Link"
+    },
    polls: {
        textInPoll: "Press the image to take the poll!"
    },
--- a/app/Languages/es.js
+++ b/app/Languages/es.js
@ -7,7 +7,20 @@ export default {
        Hobbies: "El pasatiempo",
        Achievements: "Logros",
        Messages: "Mensajes",
-        Announcements: "Anuncios"
+        Announcements: "Anuncios",
+        noAnnouncements: "ESNo Announcements",
+        lunch: "Eventos de almuerzo",
+        news: "ESNews",
+        shortcut: "ESShortcut: ",
+        seeLunch: "ESSee Lunch Events",
+        noNews: "ESNo news for today",
+        noAnnouncements: "ESNo announcements for today",
+        moreOn: "ESMore on"
+    },
+    dates: {
+        today: "ESToday",
+        past: "ESPast",
+        future: "ESFuture"
    },
    app: {
        home: "Casa",
@ -17,7 +30,12 @@ export default {
        more: "Más"
    },
    calendar: {
-        calendarEvents: "Eventos del calendario"
+        calendar: "ESCalendar",
+        info: "ESInfo",
+        location: "ESLocation",
+        date: "ESDate",
+        organizer: "ESOrganizer",
+        noEvents: "ESNo Events"
    },
    clubs: {
        searchClubs: "Buscar clubes"
@ -25,12 +43,27 @@ export default {
    staff: {
        searchStaff: "Personal de búsqueda"
    },
+    announcements: {
+        noAnnouncements: "ESNo Announcements"
+    },
    student: {
        Grade: "El año",
        Hobbies: "El pasatiempo",
        Achievements: "Logros",
        Messages: "Mensajes",
    },
+    lunch: {
+        information: "ESInformation",
+        location: "ESLocation"
+    },
+    ssl: {
+        information: "ESInformation",
+        sponsor: "ESSponsor",
+        location: "ESLocation"
+    },
+    challenge: {
+        link: "ESLink"
+    },
    polls: {
        textInPoll: "¡Pulsa la imagen para realizar la encuesta!'"
    },
--- a/app/LunchEvents.js
+++ b/app/LunchEvents.js
@ -25,9 +25,10 @@ import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
 import LinearGradient from 'react-native-linear-gradient';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import I18n from 'i18n-js';
 const Stack = createStackNavigator();

-export const LunchInfo = ({route}) => {
+{/*export const LunchInfo = ({route}) => {
    const item = route.params;
    return (
      <View style = {{padding: 10, backgroundColor: 'white', height: '100%'}}>
@ -49,7 +50,7 @@ export const LunchInfo = ({route}) => {
        </View>
      </View>
    )
-}
+}*/}

 function LunchEvent (props) {
    const item = props.item
@ -64,18 +65,11 @@ function LunchEvent (props) {
                        {expand?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}
                    </View>
                </View>
-                {expand?<View style={{marginLeft: 50}}><Text style={styles.accordianHeader}>Information</Text><Text style={styles.accordianText}>{item.text}</Text><Text style={styles.accordianHeader}>{'\n'}Location</Text><Text style={[styles.accordianText, {paddingBottom: '4%'}]}>{item.loc}</Text></View>:<></>}
+                {expand?<View style={{marginLeft: 50}}><Text style={styles.accordianHeader}>{I18n.t('lunch.information')}</Text><Text style={styles.accordianText}>{item.text}</Text><Text style={styles.accordianHeader}>{'\n'}{I18n.t('lunch.location')}</Text><Text style={[styles.accordianText, {paddingBottom: '4%'}]}>{item.loc}</Text></View>:<></>}
            </TouchableOpacity>
        </View>
    )
 }
-/*<TouchableOpacity style={styles2.moreitem} onPress={()=>props.navigation.navigate('LunchInfo', {data:props.data,name:item.title,text:item.text,loc:item.loc})} activeOpacity={0.8}>
-    <Image source = {require('./assets/lunch.png')} style = {{height: 40, width: 40, marginRight: 10, tintColor: '#323232'}}/>
-    <View style = {{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '85%'}}>
-        <Text style={{fontSize: 20}}>{item.title}</Text>
-        <Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2'}}/>
-    </View>
-</TouchableOpacity>*/

 class LunchEvents extends React.Component {
    
--- a/app/More.js
+++ b/app/More.js
@ -21,7 +21,7 @@ import {
 } from 'react-native/Libraries/NewAppScreen';

 import { NavigationContainer } from '@react-navigation/native'
-import { createStackNavigator } from '@react-navigation/stack'
+import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack'

 import styles from './styles/morestyles'
 import Announcements, {TeacherList} from './Announcements'
@ -30,12 +30,11 @@ import StudentWeek from './StudentWeek'
 import SSLOps, {SSLInfo} from './SSLOps'
 import LunchEvents, {LunchInfo} from './LunchEvents'
 import ChallengeWeek from './ChallengeWeek'
-import Settings from './Settings'
 import Poll from './Poll'
-import Images from './Images'
+import Language from './Language'
 import LinearGradient from 'react-native-linear-gradient'
 import Ionicons from 'react-native-vector-icons/Ionicons';
-//import I18n from './i18n';
+import I18n from './i18n';

 const Stack = createStackNavigator()

@ -50,14 +49,14 @@ class MoreSwitch extends React.Component {
 			<View style={{flex:1,backgroundColor:'white', paddingHorizontal: '5%'}}>
 				<FlatList
 					data={[
-						{name:'Announcements',key:"announce", img:"megaphone-outline"},
-						{name:"Resources",key:"resources", img:"newspaper-outline"},
-						{name:"Student of the Week",key:"studentweek", img:"ribbon-outline"},
-						{name:"Lunch Events",key:"lunchevent", img:"fast-food-outline"},
-						{name:"SSL Opportunities",key:"sslopps", img:"school-outline"},
-						{name:"Challenge of the Week",key:"challengeweek", img:"golf-outline"},
-						{name:"Polls", key:"polls", img: "stats-chart-outline"},
-						{name:"Settings", key:"settings", img: "settings-outline"},
+						{name:I18n.t("more.Announcements"),key:"announce", img:"megaphone-outline"},
+						{name:I18n.t("more.Resources"),key:"resources", img:"newspaper-outline"},
+						{name:I18n.t("more.SOTW"),key:"studentweek", img:"ribbon-outline"},
+						{name:I18n.t("more.lunch"),key:"lunchevent", img:"fast-food-outline"},
+						{name:I18n.t("more.ssl"),key:"sslopps", img:"school-outline"},
+						{name:I18n.t("more.COTW"),key:"challengeweek", img:"golf-outline"},
+						{name:I18n.t("more.Polls"), key:"polls", img: "stats-chart-outline"},
+						{name:I18n.t("more.Settings"), key:"settings", img: "settings-outline"},
 					]}
 					renderItem={({item})=>
 						
@ -76,6 +75,35 @@ class MoreSwitch extends React.Component {
 	}
 }

+class SettingSwitch extends React.Component {
+	constructor(props) {
+		super(props)
+		this.props = props
+	}
+	
+	render() {
+		return (
+			<View style={{flex:1,backgroundColor:'white', paddingHorizontal: '5%'}}>
+				<FlatList
+					data={[
+						{name:"Language",key:"language", img:'language-outline'}
+					]}
+					renderItem={({item})=>
+						<TouchableOpacity style={styles.moreitem} onPress={()=>this.props.navigation.navigate(item.key)}>
+							<Ionicons name={item.img} size={36} color={'#323232'}style={{marginRight: 15}}/>
+							<View style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '85%'}}>
+								<Text style={styles.moretext}>{I18n.t('settings.' + item.key)}</Text>
+								<Image source = {require('./assets/forward.png')} style={{tintColor: '#b2b2b2'}}/>
+							</View>
+						</TouchableOpacity>
+					}
+				/>
+			</View>
+		)
+	}
+}
+
+
 const background = (<LinearGradient
                    colors={['#f99', 'white']}
                    style = {{flex:1,borderBottomColor:'black',borderBottomWidth:0.5}}
@ -90,7 +118,7 @@ class More extends React.Component {
 						name="Chooser" 
 						component={MoreSwitch}
 						options={{
-							title:"More",
+							title:I18n.t("more.More"),
 							headerTitleStyle:styles.headerTitle,
 							headerBackground: ()=>background,
 							headerTitleAlign: 'center'
@ -100,118 +128,130 @@ class More extends React.Component {
 						name="announce" 
 						component={Announcements}
 						options={{
-							title:"Announcements",
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
-							headerLeft:null,
+							title:I18n.t("more.Announcements"),
+							headerTitleStyle:[styles.headerTitle],
 							headerBackground: ()=>background,
-							headerTitleAlign: 'center'
+							headerTitleAlign: 'center',
+							headerBackTitleVisible:false,
+							headerTintColor: 'black'
 						}}
 					/>
 					<Stack.Screen 
 						name="resources" 
 						component={Resources}
 						options={{
-							title:"Resources",
+							title:I18n.t("more.Resources"),
 							headerTitleStyle:styles.headerTitle,
-							headerLeft:null,
+							//headerLeft:null,
 							headerBackground: ()=>background,
-							headerTitleAlign: 'center'
+							headerTitleAlign: 'center',
+							headerBackTitleVisible:false,
+							headerTintColor: 'black'
 						}}
 					/>
 					<Stack.Screen 
 						name="studentweek" 
 						component={StudentWeek}
 						options={{
-							title:"Student of the Week",
+							title:I18n.t("more.SOTW"),
 							headerTitleStyle:styles.headerTitle,
-							headerLeft:null,
+							//headerLeft:null,
 							headerBackground: ()=>background,
-							headerTitleAlign: 'center'
+							headerTitleAlign: 'center',
+							headerBackTitleVisible:false,
+							headerTintColor: 'black'
 						}}
 					/>
 					<Stack.Screen 
 						name="lunchevent" 
 						component={LunchEvents}
 						options={{
-							title:"Lunch Events",
+							title:I18n.t("more.lunch"),
 							headerTitleStyle:styles.headerTitle,
-							headerLeft:null,
+							//headerLeft:null,
 							headerBackground: ()=>background,
-							headerTitleAlign: 'center'
+							headerTitleAlign: 'center',
+							headerBackTitleVisible:false,
+							headerTintColor: 'black'
 						}}
 					/>
 					<Stack.Screen 
 						name="sslopps" 
 						component={SSLOps}
 						options={{
-							title:"SSL Opportunities",
+							title:I18n.t("more.ssl"),
 							headerTitleStyle:styles.headerTitle,
-							headerLeft:null,
+							//headerLeft:null,
 							headerBackground: ()=>background,
-							headerTitleAlign: 'center'
+							headerTitleAlign: 'center',
+							headerBackTitleVisible:false,
+							headerTintColor: 'black'
 						}}
 					/>
 					<Stack.Screen 
 						name="challengeweek" 
 						component={ChallengeWeek}
 						options={{
-							title:"Challenge of the Week",
+							title:I18n.t("more.COTW"),
 							headerTitleStyle:styles.headerTitle,
-							headerLeft:null,
+							//headerLeft:null,
 							headerBackground: ()=>background,
-							headerTitleAlign: 'center'
+							headerTitleAlign: 'center',
+							headerBackTitleVisible:false,
+							headerTintColor: 'black'
 						}}
 					/>
 					<Stack.Screen 
 						name="polls" 
 						component={Poll}
 						options={{
-							title:"Polls",
+							title:I18n.t("more.Polls"),
 							headerTitleStyle:styles.headerTitle,
-							headerLeft:null,
+							//headerLeft:null,
 							headerBackground: ()=>background,
-							headerTitleAlign: 'center'
+							headerTitleAlign: 'center',
+							headerBackTitleVisible:false,
+							headerTintColor: 'black'
 						}}
 					/>
 					<Stack.Screen 
 						name="settings" 
-						component={Settings}
+						component={SettingSwitch}
 						options={{
-							title:"Settings",
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
-							headerLeft:null,
+							title:I18n.t("more.Settings"),
+							headerTitleStyle:[styles.headerTitle],
+							//headerLeft:null,
 							headerBackground: ()=>background,
-							headerShown:false,
+							headerBackTitleVisible:false,
+							headerTintColor: 'black',
+							headerTitleAlign: 'center'
+						}}
+					/>
+					<Stack.Screen 
+						name="language" 
+						component={Language}
+						options={{
+							title:I18n.t("settings.language"),
+							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							headerBackground: ()=>background,
+							//headerLeft: null,
+							headerBackTitleVisible:false,
+							headerTintColor: 'black',
+							headerTitleAlign: 'center'
 						}}
 					/>
 					<Stack.Screen 
 						name="TeacherList" 
 						component={TeacherList}
 						options={({route})=>({
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center',fontSize:Math.min(24,24*23/route.params.name.length)}],
+							headerTitleStyle:[styles.headerTitle],
 							title:route.params.name,
 							headerRight:()=>(<></>),
-							headerBackground: ()=>background
-						})}
-					/>
-					<Stack.Screen 
-						name="LunchInfo" 
-						component={LunchInfo}
-						options={({route})=>({
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center',fontSize:Math.min(24,24*23/route.params.name.length)}],
-							title:route.params.name,
-							headerRight:()=>(<></>),
-							headerBackground: ()=>background
-						})}
-					/>
-					<Stack.Screen 
-						name="SSLInfo" 
-						component={SSLInfo}
-						options={({route})=>({
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center',fontSize:Math.min(24,24*23/route.params.name.length)}],
-							title:route.params.name,
 							headerBackground: ()=>background,
-							headerRight:()=>(<></>)
+							headerBackTitleVisible:false,
+							headerTintColor: 'black',
+							headerTitleAlign: 'center'
+							//headerLeft: null,
 						})}
 					/>
 				</Stack.Navigator>
--- a/app/Resources.js
+++ b/app/Resources.js
@ -30,7 +30,7 @@ function ResourceLink(props) {
        <View style={{aspectRatio: 1}}>
          <Image source={props.img} style={{width: '100%', height: '100%', borderRadius: 30}}/>
        </View>
-        <Text style={{fontColor: 'black', alignSelf: 'center', textAlign: 'center', marginTop: '2%', fontSize: 16}}>{props.name}</Text>
+        <Text style={{color: 'black', alignSelf: 'center', textAlign: 'center', marginTop: '2%', fontSize: 16}}>{props.name}</Text>
      </View>
    </TouchableOpacity>
 	)
--- a/app/SSLOps.js
+++ b/app/SSLOps.js
@ -25,11 +25,11 @@ import styles from './styles/liststyles';
 import { url } from './resources/fetchInfo.json';
 import LinearGradient from 'react-native-linear-gradient';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-//import I18n from './i18n';
+import I18n from './i18n';

 const Stack = createStackNavigator();

-export const SSLInfo = ({route}) => {
+{/*export const SSLInfo = ({route}) => {
 	const item = route.params;
 	console
 	return (
@ -60,7 +60,7 @@ export const SSLInfo = ({route}) => {
 			</View>
 		</View>
 	)
-  }
+  }*/}

 function SSLElement (props) {
 	const item = props.item;
@ -75,7 +75,7 @@ function SSLElement (props) {
                        {expand?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}
                    </View>
 				</View>
-				{expand?<View style={{marginLeft: 50}}><Text style={styles.accordianHeader}>Information</Text><Text style={styles.accordianText}>{item.item.text}</Text><Text style={styles.accordianHeader}>{'\n'}Sponsor</Text><Text style={styles.accordianText}>{item.item.teacher}</Text><Text style={styles.accordianHeader}>{'\n'}Location</Text><Text style={[styles.accordianText, {paddingBottom: '4%'}]}>{item.item.loc}</Text></View>:<></>}
+				{expand?<View style={{marginLeft: 50}}><Text style={styles.accordianHeader}>{I18n.t('ssl.information')}</Text><Text style={styles.accordianText}>{item.item.text}</Text><Text style={styles.accordianHeader}>{'\n'}{I18n.t('ssl.sponsor')}</Text><Text style={styles.accordianText}>{item.item.teacher}</Text><Text style={styles.accordianHeader}>{'\n'}{I18n.t('ssl.location')}</Text><Text style={[styles.accordianText, {paddingBottom: '4%'}]}>{item.item.loc}</Text></View>:<></>}
 			</TouchableOpacity>
 		</View>
    )
--- a/app/Settings.js
+++ b/app/Settings.js
@ -1,129 +0,0 @@
-import React from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  StatusBar,
-  Modal,
-  TouchableHighlight,
-  Image,
-  FlatList,
-  TouchableOpacity,
-} from 'react-native';
-
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-import styles from './styles/morestyles'
-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'
-
-const Stack = createStackNavigator()
-
-
-
-
-class placeHoldingForNow extends React.Component{
-	constructor(props) {
-		super(props)
-		this.props = props
-	}
-	render() {
-		return (
-			<View style={{flex:1,backgroundColor:'red'}}>
-				<Text>
-					Coming Soon...
-				</Text>
-			</View>
-		)
-	}
-}
-/*class SettingSwitch extends React.Component {
-	constructor(props) {
-		super(props)
-		this.props = props
-	}
-	
-	render() {
-		return (
-			<View style={{flex:1,backgroundColor:'red'}}>
-				<FlatList
-					data={[
-						//{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>
-					}
-				/>
-			</View>
-		)
-	}
-}
-*/
-const background = (<LinearGradient
-                    colors={['#f99', 'white']}
-                    style = {{flex:1,borderBottomColor:'black',borderBottomWidth:0.5}}
-                    />)
-
-class Settings extends React.Component {
-	render() {
-		return (
-			<View style={{flex:1,backgroundColor:'red'}}>
-				<Text>
-					Coming Soon...
-				</Text>
-			</View>
-			/*<NavigationContainer independent={true}>
-				<Stack.Navigator>
-					<Stack.Screen 
-						name="Chooser" 
-						component={placeHoldingForNow}
-						options={{
-							title:'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}
-						options={{
-							title:'Notifications',
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
-							headerLeft:null,
-							headerBackground: ()=>background
-						}}
-					/>}
-				</Stack.Navigator>
-			</NavigationContainer>*/
-		)
-	}
-}
-
-export default Settings;
--- a/app/Staff.js
+++ b/app/Staff.js
@ -10,6 +10,7 @@ import {
  FlatList,
  TouchableOpacity,
  Image,
+  TouchableHighlight,
  Linking
 } from 'react-native';

@ -20,43 +21,93 @@ import {
  DebugInstructions,
  ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
+import { NavigationContainer } from '@react-navigation/native'
+import { createStackNavigator } from '@react-navigation/stack'
 import { SearchBar } from 'react-native-elements';
 import styles from './styles/liststyles'
+import morestyles from './styles/morestyles'
 import { url } from './resources/fetchInfo.json'
-//import I18n from './i18n';
+import LinearGradient from 'react-native-linear-gradient';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import I18n from './i18n';

-const StaffElement = ({item}) => {
-  const [visible, setVisible] = useState(false)
-  const extra = (
-    [
-      ...item.item.emails.map(email=>(
-      <View style={{display: 'flex', flexDirection: 'row', alignItems: 'center', marginTop: '2%', paddingHorizontal: '1%'}}>
-        <View style={{width: '10%', display: 'flex', justifyContent: 'center'}}>
-          <Image source={require('./assets/email.png')}  style={{height: 22, width: 22}}/>
+const Stack = createStackNavigator();
+
+export const StaffInfo = ({route}) => {
+  const item = route.params;
+  return (
+    <View style = {{padding: 10, backgroundColor: 'white', height: '100%'}}>
+      {item.emails.map(email =>
+        <View style ={[styles.infoContainer, {flexDirection: 'row', alignItems: 'center'}]}>
+          <View style={{display: 'flex', justifyContent: 'center'}}>
+            <Ionicons name='mail-outline' size={28} style={{marginRight: 15}}/>
          </View>
-        <View style={{width: '90%'}}>
-          <Text key={email}><Text style={styles.linktext} onPress={()=>Linking.openURL("mailto:"+email)}><Text></Text>{email}</Text></Text>
+          <View style={{}}>
+            <Text style = {{fontSize:16}}>{email}</Text>
          </View>
        </View>
-      ))
-    ]
+      )}
+    </View>
  )
-  //const extra = [...item.item.emails.map(email=>(<Text key={email}>{'\n'}Email: <Text style={styles.linktext} onPress={()=>Linking.openURL("mailto:"+email)}>{email}</Text></Text>))]
+}
+function StaffElement (props) {
+  const item = props.item;
  return(
 	<View>
-	  <TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
-    <View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
-      <Image source = {require('./assets/staff.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
-      <Text style={styles.title3}>{item.item.name}</Text>
+      <TouchableOpacity style={[styles.listItem]} onPress={()=>props.navigation.navigate('StaffInfo', {data:props.data,name:props.name,emails:item.emails})} activeOpacity={0.8}>
+        <View style = {[styles.container2, {justifyContent: 'space-between'}]}>
+          <View style={{display: 'flex', flexDirection: 'row'}}> 
+            <Ionicons name = "ios-nutrition-outline" size={36} color={'#323232'} style={{marginRight: 15}} />
+            <Text style={[styles.title, {alignSelf:'center'}]}>{props.item.name}</Text>
+          </View>
+          <Image source = {require('./assets/forward.png')} style={{tintColor: '#b2b2b2'}}/>
        </View>
-		{visible?extra:<></>}
      </TouchableOpacity>
 	</View>
  )
 }
-class Staff extends React.Component {

+const background = (<LinearGradient
+  colors={['#f99', 'white']}
+  style = {{flex:1,borderBottomColor:'black',borderBottomWidth:0.5}}
+  />)

+function Staff () {
+  return (
+    <NavigationContainer independent={true}>
+      <Stack.Navigator>
+        <Stack.Screen 
+          name = "Staff"
+          component = {Staffs}
+          options={({
+            headerShown: true,
+            headerTitleStyle:morestyles.headerTitle,
+            headerBackground: ()=>background,
+            //headerleft: null,
+            title:I18n.t('app.staff'),
+            headerBackTitleVisible:false,
+            headerTintColor: 'black',
+            headerTitleAlign: 'center'
+          })}
+        />
+        <Stack.Screen 
+          name = "StaffInfo"
+          component = {StaffInfo}
+          options={({route})=>({
+            title:route.params.name,
+            headerTitleStyle:[morestyles.headerTitle,{alignSelf:'center'}],
+            headerBackground: ()=>background,
+            headerBackTitleVisible:false,
+            headerTintColor: 'black',
+            headerTitleAlign: 'center',
+          })}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  ) 
+}
+
+class Staffs extends React.Component {
 	constructor(props) {
    super(props);

@ -95,7 +146,7 @@ class Staff extends React.Component {
  updateSearch = (search) => {
    this.setState({ search:search });
 	const searchPool = search.startsWith(this.state.search)?this.state.dataSearch:this.state.data;
-    const ds = searchPool.filter((thing)=>{return thing.name.toLowerCase().split(' ').some(x=>x.startsWith(search.toLowerCase()))})
+    const ds = searchPool.filter((thing)=>{return thing.name.toLowerCase().startsWith(search.toLowerCase())})
    this.setState({dataSearch: ds})
  };
  clearSearch  = (search)=>{
@ -104,21 +155,23 @@ class Staff extends React.Component {
  }
  render() {
    const { data , dataSearch,search} = this.state;
+
    return (
-      <SafeAreaView style={styles.container}>
+      <SafeAreaView style={styles.moreDefault}>
        <SearchBar
        lightTheme
-        placeholder="Staff Search"
+        placeholder={I18n.t('staff.searchStaff')}
        onChangeText={this.updateSearch}
        onCancel={this.clearSearch}
        onClear={this.clearSearch}
        value={this.state.search}/>
      <FlatList
        data={dataSearch}
-        renderItem={item => <StaffElement item={item}/>}
+        renderItem={({item}) => <StaffElement item={item} name={item.name} navigation={this.props.navigation}/>}
        keyExtractor={item => JSON.stringify(item)}
      />
    </SafeAreaView>
+    
    );
  }
 }
--- a/app/StudentWeek.js
+++ b/app/StudentWeek.js
@ -17,9 +17,8 @@ import {
  DebugInstructions,
  ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
-//import I18n from './i18n';
+import I18n from './i18n';
 import { url } from './resources/fetchInfo.json'
-
 import LinearGradient from 'react-native-linear-gradient';

 class StudentWeek extends React.Component {
@ -76,14 +75,14 @@ class StudentWeek extends React.Component {
 						<Image style={{resizeMode: 'cover',borderRadius: 150, height: 300, width: 300, alignSelf: 'center'}} source = {{iconURI}} /> 
 					</View>
 					<Text style={{fontSize:28,marginTop:'5%',textAlign:'center'}}>{this.state.data.name}</Text>
-					<Text style={{fontSize:20,textAlign:'center', fontWeight: '200'}}>Grade {this.state.data.year}</Text>
+					<Text style={{fontSize:20,textAlign:'center', fontWeight: '200'}}>{I18n.t('student.Grade')} {this.state.data.year}</Text>
 					<View>
 						<View style={{display: 'flex', padding:'2%', borderRadius: 8, marginTop:'5%'}}>
 							<TouchableOpacity onPress = {this.clickHobby.bind(this)}>
 								<View style={{display:'flex', flexDirection: 'row'}}>
 									<Image source = {require('./assets/hobbies.png')} />
 									<View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}>
-										<Text style={{fontSize: 20,  alignSelf: 'center'}}>Hobbies</Text>
+										<Text style={{fontSize: 20,  alignSelf: 'center'}}>{I18n.t('student.Hobbies')}</Text>
 										{this.state.hobbyExpanded?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}
 									</View>
 								</View>
@ -93,7 +92,7 @@ class StudentWeek extends React.Component {
 								<View style={{display: 'flex', borderTopWidth: 1, borderTopColor: '#8D8D8D', shadowColor: 'black', flexDirection: 'row'}}>
 									<Image source = {require('./assets/achievements.png')} />
 									<View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}>
-										<Text style={{fontSize: 20, alignSelf: 'center'}}>Achievements</Text>
+										<Text style={{fontSize: 20, alignSelf: 'center'}}>{I18n.t('student.Achievements')}</Text>
 										{this.state.achievementExpanded?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}
 									</View>
 								</View>
@ -103,7 +102,7 @@ class StudentWeek extends React.Component {
 								<View style={{display: 'flex', borderTopWidth: 1, borderTopColor: '#8D8D8D', shadowColor: 'black', flexDirection: 'row'}}>
 									<Image source = {require('./assets/message.png')} />
 									<View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}>
-										<Text style={{fontSize: 20, alignSelf: 'center'}}>Messages</Text>
+										<Text style={{fontSize: 20, alignSelf: 'center'}}>{I18n.t('student.Messages')}</Text>
 										{this.state.messageExpanded?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}
 									</View>
 								</View>
--- a/app/assets/arrow_right.png
+++ b/app/assets/arrow_right.png
--- a/app/assets/calendar.png
+++ b/app/assets/calendar.png
--- a/app/assets/dep.png
+++ b/app/assets/dep.png
--- a/app/assets/desc.png
+++ b/app/assets/desc.png
--- a/app/i18n.js
+++ b/app/i18n.js
@ -1,12 +1,18 @@
-//'use strict';
-//import I18n from 'react-native-i18n';
-//import en from './Languages/en'
-//import es from './Languages/es'
+import I18n from "i18n-js";
+import * as RNLocalize from "react-native-localize";
+import en from "./Languages/en.js";
+import es from "./Languages/es.js";

-//I18n.fallbacks = true;
-//I18n.translations = {
-  //en,
-  //es,
-//};
+const locales = RNLocalize.getLocales();

-//export default I18n;
+if (Array.isArray(locales)) {
+  I18n.locale = locales[0].languageTag;
+}
+
+I18n.fallbacks = true;
+I18n.translations = {
+  en,
+  es
+};
+
+export default I18n;
--- a/app/styles/liststyles.js
+++ b/app/styles/liststyles.js
@ -3,7 +3,7 @@ import {StyleSheet, StatusBar, Dimensions} from 'react-native';
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    marginTop: StatusBar.currentHeight || 0
+    marginTop: /*StatusBar.currentHeight ||*/ 0
  },
  item: {
    backgroundColor: 'white',
--- a/ios/Podfile
+++ b/ios/Podfile
@ -15,6 +15,8 @@ target 'blazerapp' do
  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'


+  pod 'RNLocalize', :path => '../node_modules/react-native-localize'
+
  target 'blazerappTests' do
    inherit! :complete
    # Pods for testing
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@ -313,12 +313,14 @@ PODS:
    - React-Core (= 0.63.4)
    - React-cxxreact (= 0.63.4)
    - React-jsi (= 0.63.4)
-  - RNCAsyncStorage (1.13.0):
+  - RNCAsyncStorage (1.15.5):
    - React-Core
  - RNCMaskedView (0.1.11):
    - React
  - RNGestureHandler (1.10.3):
    - React-Core
+  - RNLocalize (2.1.1):
+    - React-Core
  - RNScreens (3.4.0):
    - React-Core
    - React-RCTImage
@ -379,9 +381,10 @@ DEPENDENCIES:
  - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
  - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
  - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
-  - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
+  - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
  - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - 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`)
@ -461,11 +464,13 @@ EXTERNAL SOURCES:
  ReactCommon:
    :path: "../node_modules/react-native/ReactCommon"
  RNCAsyncStorage:
-    :path: "../node_modules/@react-native-community/async-storage"
+    :path: "../node_modules/@react-native-async-storage/async-storage"
  RNCMaskedView:
    :path: "../node_modules/@react-native-community/masked-view"
  RNGestureHandler:
    :path: "../node_modules/react-native-gesture-handler"
+  RNLocalize:
+    :path: "../node_modules/react-native-localize"
  RNScreens:
    :path: "../node_modules/react-native-screens"
  RNVectorIcons:
@ -514,9 +519,10 @@ SPEC CHECKSUMS:
  React-RCTText: 5c51df3f08cb9dedc6e790161195d12bac06101c
  React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d
  ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b
-  RNCAsyncStorage: dfcd17ecff5403061bc649ee33ee751718870c8a
+  RNCAsyncStorage: 56a3355a10b5d660c48c6e37325ac85ebfd09885
  RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
  RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+  RNLocalize: 82a569022724d35461e2dc5b5d015a13c3ca995b
  RNScreens: 21b73c94c9117e1110a79ee0ee80c93ccefed8ce
  RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
  Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
--- a/package-lock.json
+++ b/package-lock.json
@ -8,20 +8,25 @@
      "version": "0.0.1",
      "dependencies": {
        "@k3rn31p4nic/google-translate-api": "github:k3rn31p4nic/google-translate-api",
-        "@react-native-community/async-storage": "github:react-native-community/async-storage",
+        "@react-native-async-storage/async-storage": "^1.15.5",
        "@react-native-community/masked-view": "^0.1.11",
        "@react-navigation/bottom-tabs": "^5.8.0",
        "@react-navigation/native": "^5.9.4",
        "@react-navigation/stack": "^5.9.0",
        "@vitalets/google-translate-api": "^4.0.0",
        "events": "^3.2.0",
+        "i18n-js": "^3.8.0",
+        "i18next": "^20.3.3",
+        "lodash.memoize": "^4.1.2",
        "querystring": "^0.2.0",
        "react": "16.13.1",
+        "react-i18next": "^11.11.3",
        "react-native": "^0.63.2",
        "react-native-elements": "^2.2.0",
        "react-native-gesture-handler": "^1.10.3",
        "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",
@ -1967,11 +1972,10 @@
        "node": ">=8.0.0"
      }
    },
-    "node_modules/@react-native-community/async-storage": {
-      "name": "@react-native-async-storage/async-storage",
-      "version": "1.13.0",
-      "resolved": "git+ssh://git@github.com/react-native-community/async-storage.git#32f697a67173ca0daa051c292561d74567a0147a",
-      "license": "MIT",
+    "node_modules/@react-native-async-storage/async-storage": {
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.15.5.tgz",
+      "integrity": "sha512-4AYehLH39B9a8UXCMf3ieOK+G61wGMP72ikx6/XSMA0DUnvx0PgaeaT2Wyt06kTrDTy8edewKnbrbeqwaM50TQ==",
      "dependencies": {
        "deep-assign": "^3.0.0"
      },
@ -7016,6 +7020,14 @@
      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
      "dev": true
    },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
    "node_modules/http-cache-semantics": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
@ -7072,6 +7084,30 @@
        "node": ">=8.12.0"
      }
    },
+    "node_modules/i18n-js": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/i18n-js/-/i18n-js-3.8.0.tgz",
+      "integrity": "sha512-hDsGgPuvw/2P+lXSbOafAwspK8Ste8YrwuuUg17W3wEcO1JkQxBlPgsN1t2+852nTnz4YSYTjZc/1nAA2PC/nw=="
+    },
+    "node_modules/i18next": {
+      "version": "20.3.3",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-20.3.3.tgz",
+      "integrity": "sha512-tx9EUhHeaipvZ5pFLTaN9Xdm5Ssal774MpujaTA1Wv/ST/1My5SnoBmliY1lOpyEP5Z51Dq1gXifk/y4Yt3agQ==",
+      "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",
@ -9605,6 +9641,11 @@
      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
+    },
    "node_modules/lodash.omit": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
@ -12416,6 +12457,30 @@
        "ws": "^7"
      }
    },
+    "node_modules/react-i18next": {
+      "version": "11.11.3",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.11.3.tgz",
+      "integrity": "sha512-upzG5/SpyOlYP5oSF4K8TZBvDWVhnCo38JNV+KnWjrg0+IaJCBltyh6lRGZDO5ovLyA4dU6Ip0bwbUCjb6Yyxw==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.5",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 19.0.0",
+        "react": ">= 16.8.0"
+      }
+    },
+    "node_modules/react-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/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -12539,6 +12604,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",
@ -14710,20 +14783,6 @@
        "is-typedarray": "^1.0.0"
      }
    },
-    "node_modules/typescript": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.4.tgz",
-      "integrity": "sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==",
-      "dev": true,
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
    "node_modules/ua-parser-js": {
      "version": "0.7.28",
      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
@ -15091,6 +15150,14 @@
      "resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz",
      "integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w=="
    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/w3c-hr-time": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@ -16813,9 +16880,10 @@
        "got": "^11.8.1"
      }
    },
-    "@react-native-community/async-storage": {
-      "version": "git+ssh://git@github.com/react-native-community/async-storage.git#32f697a67173ca0daa051c292561d74567a0147a",
-      "from": "@react-native-community/async-storage@github:react-native-community/async-storage",
+    "@react-native-async-storage/async-storage": {
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.15.5.tgz",
+      "integrity": "sha512-4AYehLH39B9a8UXCMf3ieOK+G61wGMP72ikx6/XSMA0DUnvx0PgaeaT2Wyt06kTrDTy8edewKnbrbeqwaM50TQ==",
      "requires": {
        "deep-assign": "^3.0.0"
      }
@ -17475,8 +17543,7 @@
    "@react-native-community/masked-view": {
      "version": "0.1.11",
      "resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.11.tgz",
-      "integrity": "sha512-rQfMIGSR/1r/SyN87+VD8xHHzDYeHaJq6elOSCAD+0iLagXkSI2pfA0LmSXP21uw5i3em7GkkRjfJ8wpqWXZNw==",
-      "requires": {}
+      "integrity": "sha512-rQfMIGSR/1r/SyN87+VD8xHHzDYeHaJq6elOSCAD+0iLagXkSI2pfA0LmSXP21uw5i3em7GkkRjfJ8wpqWXZNw=="
    },
    "@react-navigation/bottom-tabs": {
      "version": "5.11.11",
@ -18039,8 +18106,7 @@
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
      "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "acorn-walk": {
      "version": "6.2.0",
@ -19698,8 +19764,7 @@
      "version": "22.4.1",
      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-22.4.1.tgz",
      "integrity": "sha512-gcLfn6P2PrFAVx3AobaOzlIEevpAEf9chTpFZz7bYfc7pz8XRv7vuKTIE4hxPKZSha6XWKKplDQ0x9Pq8xX2mg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "eslint-plugin-prettier": {
      "version": "3.1.2",
@ -19751,8 +19816,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-3.0.0.tgz",
      "integrity": "sha512-EjxTHxjLKIBWFgDJdhKKzLh5q+vjTFrqNZX36uIxWS4OfyXe5DawqPj3U5qeJ1ngLwatjzQnmR0Lz0J0YH3kxw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "eslint-plugin-react-native": {
      "version": "3.8.1",
@ -20761,6 +20825,14 @@
      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
      "dev": true
    },
+    "html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "requires": {
+        "void-elements": "3.1.0"
+      }
+    },
    "http-cache-semantics": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
@ -20804,6 +20876,29 @@
      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
      "dev": true
    },
+    "i18n-js": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/i18n-js/-/i18n-js-3.8.0.tgz",
+      "integrity": "sha512-hDsGgPuvw/2P+lXSbOafAwspK8Ste8YrwuuUg17W3wEcO1JkQxBlPgsN1t2+852nTnz4YSYTjZc/1nAA2PC/nw=="
+    },
+    "i18next": {
+      "version": "20.3.3",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-20.3.3.tgz",
+      "integrity": "sha512-tx9EUhHeaipvZ5pFLTaN9Xdm5Ssal774MpujaTA1Wv/ST/1My5SnoBmliY1lOpyEP5Z51Dq1gXifk/y4Yt3agQ==",
+      "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",
@ -21939,8 +22034,7 @@
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "jest-regex-util": {
      "version": "25.2.6",
@ -22746,6 +22840,11 @@
      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
    },
+    "lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
+    },
    "lodash.omit": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
@ -24078,6 +24177,7 @@
      "resolved": "https://registry.npmjs.org/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.59.0.tgz",
      "integrity": "sha512-1O3wrnMq4NcPQ1asEcl9lRDn/t+F1Oef6S9WaYVIKEhg9m/EQRGVrrTVP+R6B5Eeaj3+zNKbzM8Dx/NWy1hUbQ==",
      "requires": {
+        "@babel/core": "^7.0.0",
        "babel-preset-fbjs": "^3.3.0",
        "metro-babel-transformer": "0.59.0",
        "metro-react-native-babel-preset": "0.59.0",
@ -24971,6 +25071,25 @@
        "ws": "^7"
      }
    },
+    "react-i18next": {
+      "version": "11.11.3",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.11.3.tgz",
+      "integrity": "sha512-upzG5/SpyOlYP5oSF4K8TZBvDWVhnCo38JNV+KnWjrg0+IaJCBltyh6lRGZDO5ovLyA4dU6Ip0bwbUCjb6Yyxw==",
+      "requires": {
+        "@babel/runtime": "^7.14.5",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "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"
+          }
+        }
+      }
+    },
    "react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -25101,20 +25220,23 @@
    "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",
-      "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==",
-      "requires": {}
+      "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg=="
    },
    "react-native-linear-gradient": {
      "version": "2.5.6",
      "resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.5.6.tgz",
-      "integrity": "sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg==",
-      "requires": {}
+      "integrity": "sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg=="
    },
    "react-native-locale-detector": {
      "version": "1.0.1",
      "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=="
+    },
    "react-native-ratings": {
      "version": "7.6.1",
      "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-7.6.1.tgz",
@ -25127,8 +25249,7 @@
    "react-native-safe-area-context": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz",
-      "integrity": "sha512-k2Nty4PwSnrg9HwrYeeE+EYqViYJoOFwEy9LxL5RIRfoqxAq/uQXNGwpUg2/u4gnKpBbEPa9eRh15KKMe/VHkA==",
-      "requires": {}
+      "integrity": "sha512-k2Nty4PwSnrg9HwrYeeE+EYqViYJoOFwEy9LxL5RIRfoqxAq/uQXNGwpUg2/u4gnKpBbEPa9eRh15KKMe/VHkA=="
    },
    "react-native-screens": {
      "version": "3.4.0",
@ -25141,8 +25262,7 @@
    "react-native-splash-screen": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.2.0.tgz",
-      "integrity": "sha512-Ls9qiNZzW/OLFoI25wfjjAcrf2DZ975hn2vr6U9gyuxi2nooVbzQeFoQS5vQcbCt9QX5NY8ASEEAtlLdIa6KVg==",
-      "requires": {}
+      "integrity": "sha512-Ls9qiNZzW/OLFoI25wfjjAcrf2DZ975hn2vr6U9gyuxi2nooVbzQeFoQS5vQcbCt9QX5NY8ASEEAtlLdIa6KVg=="
    },
    "react-native-status-bar-height": {
      "version": "2.6.0",
@ -26820,13 +26940,6 @@
        "is-typedarray": "^1.0.0"
      }
    },
-    "typescript": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.4.tgz",
-      "integrity": "sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==",
-      "dev": true,
-      "peer": true
-    },
    "ua-parser-js": {
      "version": "0.7.28",
      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
@ -27103,6 +27216,11 @@
      "resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz",
      "integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w=="
    },
+    "void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
+    },
    "w3c-hr-time": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@ -27287,8 +27405,7 @@
    "ws": {
      "version": "7.5.0",
      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz",
-      "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==",
-      "requires": {}
+      "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw=="
    },
    "xcode": {
      "version": "2.1.0",
--- a/package.json
+++ b/package.json
@ -11,20 +11,25 @@
  },
  "dependencies": {
    "@k3rn31p4nic/google-translate-api": "github:k3rn31p4nic/google-translate-api",
-    "@react-native-community/async-storage": "github:react-native-community/async-storage",
+    "@react-native-async-storage/async-storage": "^1.15.5",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^5.8.0",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.9.0",
    "@vitalets/google-translate-api": "^4.0.0",
    "events": "^3.2.0",
+    "i18n-js": "^3.8.0",
+    "i18next": "^20.3.3",
+    "lodash.memoize": "^4.1.2",
    "querystring": "^0.2.0",
    "react": "16.13.1",
+    "react-i18next": "^11.11.3",
    "react-native": "^0.63.2",
    "react-native-elements": "^2.2.0",
    "react-native-gesture-handler": "^1.10.3",
    "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