home pg + language

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;

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'

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 todayDate = getCurrentDate()
-	const dateStr = `${date.getMonth()+1}/${date.getDate()}/${date.getFullYear()}`
+	const itemDate = new Date(item.item.date)
-	const dateInfo = dateStr===item.item.date&&item.item.time!==undefined?item.item.time: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>
+			{todayBoolean?<NewTeacherList name = 'today' list = {today} />:<></>}
-				<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%'}}>
+			{pastBoolean?<NewTeacherList name = 'past' list = {past} />:<></>}
-					<Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Today</Text>
+			{futureBoolean?<NewTeacherList name = 'future' list = {future} />:<></>}
-				</LinearGradient>
+			{!noAnn?<Text style={{textAlign: 'center', fontSize: 20, paddingTop: '2%'}}>{I18n.t('announcements.noAnnouncements')}</Text>:<></>}
-				<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>:<></>}
 		</ScrollView>
 	)
 }

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 I18n from './i18n.js'
-import AsyncStorage from '@react-native-community/async-storage'
+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={I18n.t("app.home")} component={Home}/>
-					<Tab.Screen name="Calendar" component={Calendar}/>
+					<Tab.Screen name={I18n.t("app.calendar")} component={Calendar}/>
-					<Tab.Screen name="Clubs" component={Clubs}/>
+					<Tab.Screen name={I18n.t("app.clubs")} component={Clubs}/>
-					<Tab.Screen name="Staff" component={Staff}/>
+					<Tab.Screen name={I18n.t("app.staff")} component={Staff}/>
-					<Tab.Screen name="More" component={More}/>
+					<Tab.Screen name={I18n.t("app.more")} component={More}/>
 				</Tab.Navigator>
 				: <OpenPage />}
 			</NavigationContainer>

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}}>
+    <ScrollView style = {{backgroundColor: 'white', flex:1, padding: '5%', paddingRight: '10%'}}>
-      <View style={{padding: '5%'}}>
       <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'}}>
+          <View style={{display: 'flex', marginLeft: -15, paddingHorizontal: '5%'}}>
-            <Text style={{fontSize: 16}}>Location</Text>
+            <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'}}>
+          <View style={{display: 'flex', marginLeft: -15, paddingHorizontal: '5%'}}>
-            <Text style={{fontSize: 16}}>Date</Text>
+            <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'}}>
+          <View style={{display: 'flex', marginLeft: -15, paddingHorizontal: '5%'}}>
-            <Text style={{fontSize: 16}}>Organizer</Text>
+            <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>
-      
+    </ScrollView>
-      
-    </View>
   )
 }
 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,
+            //headerLeft: null,
-            headerTitleAlign: 'center'
+            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,
+            //headerLeft: null,
-            headerTitleAlign: 'center'
+            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>
+        {todayBoolean?<NewCalendarCategory name = 'today' list = {today} navigation={this.props.navigation} />: <></>}
-          <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%'}}>
+        {pastBoolean?<NewCalendarCategory name = 'past' list = {past} navigation={this.props.navigation} />: <></>}
-            <Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Today</Text>
+        {futureBoolean?<NewCalendarCategory name = 'future' list = {future} navigation={this.props.navigation} />: <></>}
-          </LinearGradient>
+        {!noAnn?<Text style={{textAlign: 'center', fontSize: 20, paddingTop: '2%'}}>{I18n.t('calendar.noEvents')}</Text>:<></>}
-          <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>:<></>}
       </ScrollView>
 		)
   }

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>
+					<Text style={{textAlign:'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: "solid", textDecorationColor: "#000"}} onPress={() => Linking.openURL(this.state.data.link)}>{I18n.t("challenge.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>*/}
 				</View>
 			)
 		}

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%'}}>
+    <ScrollView style = {{backgroundColor: 'white', flex:1, padding: '5%', paddingRight: '10%'}}>
-      <View style ={[styles.infoContainer, {flexDirection: 'row', alignItems: 'center'}]}>
+      <View style={{display: 'flex', flexDirection: 'row', marginBottom: '5%'}}>
-        <View style={{width: '17%', display: 'flex', justifyContent: 'center'}}>
+        <Ionicons name='location-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
-          <Image source ={require('./assets/time.png')} style={{width: 50, height: 50}}/>
+        <View style={{display: 'flex', marginLeft: -15, paddingHorizontal: '5%'}}>
-        </View>
+          <Text style={{fontSize: 16}}>Meeting Location </Text>
-        <View style={{width: '83%'}}>
+          <Text style={[styles.title, styles.linktext, {fontSize: 16, fontWeight: '200'}]} onPress={() => Linking.openURL(item.link)}>{item.link}</Text>
-          <Text style = {{fontSize:20}}>{item.meeting}</Text>
         </View>
       </View>
-      <View style ={[styles.infoContainer, {flexDirection: 'row', alignItems: 'center'}]}>
+      <View style={{display: 'flex', flexDirection: 'row', marginBottom: '5%'}}>
-        <View style={{width: '17%', display: 'flex', justifyContent: 'center'}}>
+        <Ionicons name='time-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
-          <Image source ={require('./assets/zoom.png')} style={{width: 50, height: 50}}/>
+        <View style={{display: 'flex'}}>
-        </View>
+          <Text style={{fontSize: 16}}>Meeting Date</Text>
-        <View style={{width: '83%'}}>
+          <Text style={[styles.title, {fontSize: 16, fontWeight: '200'}]}>{item.meeting}</Text>
-          <Text style = {[styles.linktext,{fontSize:20}]} onPress={() => Linking.openURL(item.link)}>{item.link}</Text>
         </View>
       </View>
-			<View style ={[styles.infoContainer, {flexDirection: 'row', alignItems: 'center'}]}>
+      <View style={{display: 'flex', flexDirection: 'row'}}>
-        <View style={{width: '17%', display: 'flex', justifyContent: 'center'}}>
+        <Ionicons name='person-circle-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
-          <Image source ={require('./assets/sponsor.png')} style={{width: 50, height: 50}}/>
+        <View style={{display: 'flex'}}>
-        </View>
+          <Text style={{fontSize: 16}}>Sponsor</Text>
-        <View style={{width: '83%'}}>
+          <Text style={[styles.title, {fontSize: 16, fontWeight: '200'}]}>{item.sponsor}</Text>
-          <Text style = {{fontSize:20}}>{item.sponsor}</Text>
-        </View>
         </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}>
+      <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 = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
+        <View style = {[styles.container2, {justifyContent: 'space-between'}]}>
-          <Image source = {require('./assets/clubs.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
+          <View style={{display: 'flex', flexDirection: 'row'}}> 
-          <Text style={styles.title3}>{props.item.name}</Text>
+            <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>
     
     );

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'),
-}*/

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>English</Text>, code: "en-US"},
-      {lang: <Text>{I18n.t('language.Spanish')}</Text>, code: "es"},
+      {lang: <Text>Spanish</Text>, code: "es-US"},
     ]
 
 export default class extends Component {
@@ -71,4 +71,4 @@ export default class extends Component {
      </View>
    );
   }
-}*/
+}

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!"
     },
@@ -38,7 +71,7 @@ export default {
         Announcements: "Announcements",
         Resources: "Resources",
         SOTW: "Student of the Week",
-        lunch: "LunchEvents",
+        lunch: "Lunch Events",
         ssl: "SSL Opportunities",
         COTW: "Challenge of the Week",
         Polls: "Polls",

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!'"
     },

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 {
     

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:I18n.t("more.Announcements"),key:"announce", img:"megaphone-outline"},
-						{name:"Resources",key:"resources", img:"newspaper-outline"},
+						{name:I18n.t("more.Resources"),key:"resources", img:"newspaper-outline"},
-						{name:"Student of the Week",key:"studentweek", img:"ribbon-outline"},
+						{name:I18n.t("more.SOTW"),key:"studentweek", img:"ribbon-outline"},
-						{name:"Lunch Events",key:"lunchevent", img:"fast-food-outline"},
+						{name:I18n.t("more.lunch"),key:"lunchevent", img:"fast-food-outline"},
-						{name:"SSL Opportunities",key:"sslopps", img:"school-outline"},
+						{name:I18n.t("more.ssl"),key:"sslopps", img:"school-outline"},
-						{name:"Challenge of the Week",key:"challengeweek", img:"golf-outline"},
+						{name:I18n.t("more.COTW"),key:"challengeweek", img:"golf-outline"},
-						{name:"Polls", key:"polls", img: "stats-chart-outline"},
+						{name:I18n.t("more.Polls"), key:"polls", img: "stats-chart-outline"},
-						{name:"Settings", key:"settings", img: "settings-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",
+							title:I18n.t("more.Announcements"),
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							headerTitleStyle:[styles.headerTitle],
-							headerLeft:null,
 							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",
+							title:I18n.t("more.Settings"),
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							headerTitleStyle:[styles.headerTitle],
-							headerLeft:null,
+							//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>

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>
 	)

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>
     )

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;

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 Stack = createStackNavigator();
-  const [visible, setVisible] = useState(false)
+
-  const extra = (
+export const StaffInfo = ({route}) => {
-    [
+  const item = route.params;
-      ...item.item.emails.map(email=>(
+  return (
-      <View style={{display: 'flex', flexDirection: 'row', alignItems: 'center', marginTop: '2%', paddingHorizontal: '1%'}}>
+    <View style = {{padding: 10, backgroundColor: 'white', height: '100%'}}>
-        <View style={{width: '10%', display: 'flex', justifyContent: 'center'}}>
+      {item.emails.map(email =>
-          <Image source={require('./assets/email.png')}  style={{height: 22, width: 22}}/>
+        <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%'}}>
+          <View style={{}}>
-          <Text key={email}><Text style={styles.linktext} onPress={()=>Linking.openURL("mailto:"+email)}><Text></Text>{email}</Text></Text>
+            <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}>
+      <TouchableOpacity style={[styles.listItem]} onPress={()=>props.navigation.navigate('StaffInfo', {data:props.data,name:props.name,emails:item.emails})} activeOpacity={0.8}>
-    <View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
+        <View style = {[styles.container2, {justifyContent: 'space-between'}]}>
-      <Image source = {require('./assets/staff.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
+          <View style={{display: 'flex', flexDirection: 'row'}}> 
-      <Text style={styles.title3}>{item.item.name}</Text>
+            <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>
+    
     );
   }
 }

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>

app/i18n.js

@@ -1,12 +1,18 @@
-//'use strict';
+import I18n from "i18n-js";
-//import I18n from 'react-native-i18n';
+import * as RNLocalize from "react-native-localize";
-//import en from './Languages/en'
+import en from "./Languages/en.js";
-//import es from './Languages/es'
+import es from "./Languages/es.js";
 
-//I18n.fallbacks = true;
+const locales = RNLocalize.getLocales();
-//I18n.translations = {
-  //en,
-  //es,
-//};
 
-//export default I18n;
+if (Array.isArray(locales)) {
+  I18n.locale = locales[0].languageTag;
+}
+
+I18n.fallbacks = true;
+I18n.translations = {
+  en,
+  es
+};
+
+export default I18n;

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',

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

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

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": {
+    "node_modules/@react-native-async-storage/async-storage": {
-      "name": "@react-native-async-storage/async-storage",
+      "version": "1.15.5",
-      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.15.5.tgz",
-      "resolved": "git+ssh://git@github.com/react-native-community/async-storage.git#32f697a67173ca0daa051c292561d74567a0147a",
+      "integrity": "sha512-4AYehLH39B9a8UXCMf3ieOK+G61wGMP72ikx6/XSMA0DUnvx0PgaeaT2Wyt06kTrDTy8edewKnbrbeqwaM50TQ==",
-      "license": "MIT",
       "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": {
+    "@react-native-async-storage/async-storage": {
-      "version": "git+ssh://git@github.com/react-native-community/async-storage.git#32f697a67173ca0daa051c292561d74567a0147a",
+      "version": "1.15.5",
-      "from": "@react-native-community/async-storage@github:react-native-community/async-storage",
+      "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==",
+      "integrity": "sha512-rQfMIGSR/1r/SyN87+VD8xHHzDYeHaJq6elOSCAD+0iLagXkSI2pfA0LmSXP21uw5i3em7GkkRjfJ8wpqWXZNw=="
-      "requires": {}
     },
     "@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,
+      "dev": true
-      "requires": {}
     },
     "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,
+      "dev": true
-      "requires": {}
     },
     "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,
+      "dev": true
-      "requires": {}
     },
     "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,
+      "dev": true
-      "requires": {}
     },
     "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==",
+      "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg=="
-      "requires": {}
     },
     "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==",
+      "integrity": "sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg=="
-      "requires": {}
     },
     "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==",
+      "integrity": "sha512-k2Nty4PwSnrg9HwrYeeE+EYqViYJoOFwEy9LxL5RIRfoqxAq/uQXNGwpUg2/u4gnKpBbEPa9eRh15KKMe/VHkA=="
-      "requires": {}
     },
     "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==",
+      "integrity": "sha512-Ls9qiNZzW/OLFoI25wfjjAcrf2DZ975hn2vr6U9gyuxi2nooVbzQeFoQS5vQcbCt9QX5NY8ASEEAtlLdIa6KVg=="
-      "requires": {}
     },
     "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==",
+      "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw=="
-      "requires": {}
     },
     "xcode": {
       "version": "2.1.0",

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",