added spanish translation

2026-07-16 06:50:22 -04:00 · 2021-01-01 00:23:17 -05:00
parent 04fb03c8ac
commit 4c5d37b90e
22 changed files with 1405 additions and 81 deletions
@@ -19,21 +19,27 @@ import {

 import { NavigationContainer } from '@react-navigation/native'
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
-import SplashScreen from 'react-native-splash-screen';
 import Home from './Home'
 import Calendar from './Calendar'
-import Poll from './Poll'
 import Clubs from './Clubs'
 import More from './More'
 import Staff from './Staff'
 import OpeningPage from './OpeningPage';
 import OpenPage from './OpenPage';
-import styles from './styles/morestyles';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import I18n from './i18n';
+import AsyncStorage from '@react-native-community/async-storage'
+


 const Tab = createBottomTabNavigator();

+AsyncStorage.getItem('language')
+  .then((token) => { 
+	console.log("lang: " + token);
+	I18n.locale = token;
+  });
+
 class App extends React.Component {
 	state = {
 		loaded: false
@@ -52,17 +58,15 @@ class App extends React.Component {
 					tabBarIcon: ({ focused, color, size }) => {
 						let iconName;
 			
-						if (route.name === 'Home') {
+						if (route.name === 'Home' || route.name === 'Casa') {
 							iconName = focused ? 'ios-home' : 'ios-home-outline';
-						} else if (route.name === 'Calendar') {
+						} else if (route.name === 'Calendar' || route.name === 'Calendario') {
 							iconName = focused ? 'ios-calendar' : 'ios-calendar-outline';
-						} else if (route.name === 'Polls') {
-							iconName = focused ? 'ios-pie-chart' : 'ios-pie-chart-outline';
-						} else if (route.name === 'Clubs') {
+						} else if (route.name === 'Clubs' || route.name === 'Clubes') {
 							iconName = focused ? 'ios-people-circle' : 'ios-people-circle-outline';
-						} else if (route.name === 'Staff') {
+						} else if (route.name === 'Staff' || route.name === 'Personal') {
 							iconName = focused ? 'ios-nutrition' : 'ios-nutrition-outline';
-						} else if (route.name === 'More') {
+						} else if (route.name === 'More' || route.name === 'Más') {
 							iconName = focused ? 'ios-ellipsis-horizontal' : 'ios-ellipsis-horizontal-outline';
 						}

@@ -75,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} options ={{title: '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>
@@ -16,7 +16,7 @@ import {
 } from 'react-native/Libraries/NewAppScreen';

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

@@ -138,7 +138,7 @@ class Calendar extends React.Component {
            colors={['#f99', 'white']}
            style = {{height: '100%', borderBottomColor:'black', borderBottomWidth:0.5, display: 'flex', justifyContent: 'flex-end', paddingBottom: '2.5%'}}
          >
-            <Text style = {{fontSize: 24, fontWeight: 'bold', alignSelf: 'center'}}>Calendar Events</Text>
+            <Text style = {{fontSize: 24, fontWeight: 'bold', alignSelf: 'center'}}>{I18n.t('calendar.calendarEvents')}</Text>
          </LinearGradient>
         
        </View>
@@ -28,6 +28,7 @@ import styles from './styles/liststyles'
 import morestyles from './styles/morestyles'
 import { url } from './resources/fetchInfo.json'
 import LinearGradient from 'react-native-linear-gradient';
+import I18n from './i18n';

 const Stack = createStackNavigator();

@@ -159,7 +160,7 @@ class Clubs extends React.Component {
      <SafeAreaView style={styles.container}>
        <SearchBar
        lightTheme
-        placeholder="Search Clubs"
+        placeholder={I18n.t('clubs.searchClubs')}
        onChangeText={this.updateSearch}
        onCancel={this.clearSearch}
        onClear={this.clearSearch}
@@ -30,6 +30,7 @@ import { NavigationContainer } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
 import Announcements from './Announcements'
 import AsyncStorage from '@react-native-community/async-storage'
+import I18n from './i18n';


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

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

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

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

      <View style={{padding: '2%'}}>
        <View style ={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: '2%'}}>
-          <Text style={liststyles.homeTitle}>Announcements</Text>
+          <Text style={liststyles.homeTitle}>{I18n.t('home.Announcements')}</Text>
          <TouchableOpacity onPress={()=>props.navigation.navigate(Announcements)}>
-            <Text style={{color: 'blue', textDecorationLine: 'underline'}}>View All</Text>
+            <Text style={{color: 'blue', textDecorationLine: 'underline'}}>{I18n.t('home.viewAll')}</Text>
          </TouchableOpacity>
        </View>
        <FlatList
@@ -0,0 +1,74 @@
+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'
+
+const STORAGE_KEY = "language"
+
+const language = [
+      {lang: <Text>{I18n.t('language.English')}</Text>, code: "en"},
+      {lang: <Text>{I18n.t('language.Spanish')}</Text>, code: "es"},
+    ]
+
+export default class extends Component {
+  constructor() {
+    super();
+    this.state = {
+      languages: [],
+      value: false,
+      
+      select: I18n.t('language.SelectLanguage'),
+    }
+    this.onLanguage=this.onLanguage.bind(this);
+  }
+
+  onSelectLanguage() {
+    return(
+      language.map((data, i)=>{
+        return (
+           <View key={i} style={{backgroundColor: "#f99", padding: 10}}>
+             <TouchableOpacity onPress={()=>this.onSelectedLang(data)}>
+               <Text style={{paddingTop: 2, color: "#fff", fontSize: 18}}>{data.lang}</Text>
+             </TouchableOpacity>
+           </View>
+        )
+      })
+    )
+  }
+
+  onSelectedLang(text) {
+    this.setState({
+      value: false,
+      select: text.lang,
+    }),
+
+    I18n.locale = text.code
+    AsyncStorage.setItem('language', text.code)
+    DevSettings.reload()
+  }
+  onLanguage() {
+    this.setState({
+      value: true,
+    })
+  }
+
+  render() {
+    return (
+      <View style={{flex: 1, backgroundColor: 'white', padding: 24}}>
+        <Text style ={{marginBottom: 5}}>{I18n.t('language.note')}</Text>
+        <View>
+          <TouchableOpacity onPress={this.onLanguage}>
+            <View style={{backgroundColor: "red", padding: 10}}>
+              <Text style={{color: "white", fontSize: 18, fontWeight: 'bold'}}>{this.state.select}</Text>
+            </View>
+          </TouchableOpacity>
+          <View>
+            {(this.state.value) ? this.onSelectLanguage() : null}
+          </View>
+          
+        </View>
+     </View>
+   );
+  }
+}
@@ -0,0 +1,58 @@
+export default {
+    home: {
+        whatsNew: "What's New?",
+        viewAll: "View All",
+        SOTW: "Student of the Week",
+        Grade: "Grade",
+        Hobbies: "Hobbies",
+        Achievements: "Achievements",
+        Messages: "Messages",
+        Announcements: "Announcements"
+    },
+    app: {
+        home: "Home",
+        calendar: "Calendar",
+        clubs: "Clubs",
+        staff: "Staff",
+        more: "More"
+    },
+    calendar: {
+        calendarEvents: "Calendar Events"
+    },
+    clubs: {
+        searchClubs: "Search Clubs"
+    },
+    staff: {
+        searchStaff: "Search Staff"
+    },
+    student: {
+        Grade: "Grade",
+        Hobbies: "Hobbies",
+        Achievements: "Achievements",
+        Messages: "Messages",
+    },
+    polls: {
+        textInPoll: "Press the image to take the poll!"
+    },
+    more: {
+        Announcements: "Announcements",
+        Resources: "Resources",
+        SOTW: "Student of the Week",
+        lunch: "LunchEvents",
+        ssl: "SSL Opportunities",
+        COTW: "Challenge of the Week",
+        Polls: "Polls",
+        Settings: "Settings",
+        More: "More"
+    },
+    settings: {
+        settings: "Settings",
+        language: "Language"
+    },
+    language: {
+        SelectLanguage: "Select Language",
+        English: "English",
+        Spanish: "Spanish",
+        note: "*App will reload on language change"
+    }
+}
@@ -0,0 +1,58 @@
+export default {
+    home: {
+        whatsNew: "¿Qué hay de nuevo?",
+        viewAll: "Ver todo",
+        SOTW: "Alumno de la semana",
+        Grade: "El año",
+        Hobbies: "El pasatiempo",
+        Achievements: "Logros",
+        Messages: "Mensajes",
+        Announcements: "Anuncios"
+    },
+    app: {
+        home: "Casa",
+        calendar: "Calendario",
+        clubs: "Clubes",
+        staff: "Personal",
+        more: "Más"
+    },
+    calendar: {
+        calendarEvents: "Eventos del calendario"
+    },
+    clubs: {
+        searchClubs: "Buscar clubes"
+    },
+    staff: {
+        searchStaff: "Personal de búsqueda"
+    },
+    student: {
+        Grade: "El año",
+        Hobbies: "El pasatiempo",
+        Achievements: "Logros",
+        Messages: "Mensajes",
+    },
+    polls: {
+        textInPoll: "¡Pulsa la imagen para realizar la encuesta!'"
+    },
+    more: {
+        Announcements: "Anuncios",
+        Resources: "Recursos",
+        SOTW: "Alumno de la semana",
+        lunch: "Eventos de almuerzo",
+        ssl: "Oportunidades SSL",
+        COTW: "Desafío de la semana",
+        Polls: "Centro",
+        Settings: "Configuraciones",
+        More: "Más"
+    },
+    settings: {
+        settings: "Configuraciones",
+        language: "Idioma"
+    },
+    language: {
+        SelectLanguage: "Seleccione el idioma",
+        English: "Inglés",
+        Spanish: "Español",
+        note: "*La aplicación se recargará al cambiar de idioma"
+    }
+}
@@ -33,6 +33,7 @@ import Settings from './Settings'
 import Poll from './Poll'
 import Images from './Images'
 import LinearGradient from 'react-native-linear-gradient'
+import I18n from './i18n';

 const Stack = createStackNavigator()

@@ -47,12 +48,12 @@ class MoreSwitch extends React.Component {
 			<View style={{flex:1,backgroundColor:'red'}}>
 				<FlatList
 					data={[
-						{name:"Announcements",key:"announce", img:Images.announcements},
+						{name:'Announcements',key:"announce", img:Images.announcements},
 						{name:"Resources",key:"resources", img:Images.resources},
-						{name:"Student of the Week",key:"studentweek", img:Images.student},
-						{name:"Lunch Events",key:"lunchevent", img:Images.lunch},
-						{name:"SSL Opportunities",key:"sslopps", img:Images.sslopps},
-						{name:"Challenge of the Week",key:"challengeweek", img:Images.challenge},
+						{name:"SOTW",key:"studentweek", img:Images.student},
+						{name:"lunch",key:"lunchevent", img:Images.lunch},
+						{name:"ssl",key:"sslopps", img:Images.sslopps},
+						{name:"COTW",key:"challengeweek", img:Images.challenge},
 						{name:"Polls", key:"polls", img: Images.polls},
 						{name:"Settings", key:"settings", img: Images.settings},
 					]}
@@ -60,7 +61,7 @@ class MoreSwitch extends React.Component {
 						
 						<TouchableOpacity style={styles.moreitem} onPress={()=>this.props.navigation.navigate(item.key)}>
 							<Image source = {item.img} style = {{height: 40, width: 40, marginRight: 10, tintColor: '#e3e3e3'}}/>
-							<Text style={styles.moretext}>{item.name}</Text>
+							<Text style={styles.moretext}>{I18n.t('more.'+item.name)}</Text>
 						</TouchableOpacity>
 					}
 				/>
@@ -83,7 +84,7 @@ class More extends React.Component {
 						name="Chooser" 
 						component={MoreSwitch}
 						options={{
-							title:'More',
+							title:I18n.t('more.More'),
 							headerTitleStyle:styles.headerTitle,
 							headerBackground: ()=>background
 						}}
@@ -92,7 +93,7 @@ class More extends React.Component {
 						name="announce" 
 						component={Announcements}
 						options={{
-							title:'Announcements',
+							title:I18n.t('more.Announcements'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
@@ -102,7 +103,7 @@ class More extends React.Component {
 						name="resources" 
 						component={Resources}
 						options={{
-							title:'Resources',
+							title:I18n.t('more.Resources'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
@@ -112,7 +113,7 @@ class More extends React.Component {
 						name="studentweek" 
 						component={StudentWeek}
 						options={{
-							title:'Student of the Week',
+							title:I18n.t('more.SOTW'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
@@ -122,7 +123,7 @@ class More extends React.Component {
 						name="lunchevent" 
 						component={LunchEvents}
 						options={{
-							title:'Lunch Events',
+							title:I18n.t('more.lunch'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
@@ -132,7 +133,7 @@ class More extends React.Component {
 						name="sslopps" 
 						component={SSLOps}
 						options={{
-							title:'SSL Opportunities',
+							title:I18n.t('more.ssl'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
@@ -142,7 +143,7 @@ class More extends React.Component {
 						name="challengeweek" 
 						component={ChallengeWeek}
 						options={{
-							title:'Challenge of the Week',
+							title:I18n.t('more.COTW'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
@@ -152,7 +153,7 @@ class More extends React.Component {
 						name="polls" 
 						component={Poll}
 						options={{
-							title:'Polls',
+							title:I18n.t('more.Polls'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
@@ -162,7 +163,7 @@ class More extends React.Component {
 						name="settings" 
 						component={Settings}
 						options={{
-							title:'Settings',
+							title:I18n.t('more.Settings'),
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background
@@ -21,6 +21,7 @@ import {WebView} from 'react-native-webview';
 import LinearGradient from 'react-native-linear-gradient';
 import { Linking } from 'react-native';
 import { url } from './resources/fetchInfo.json'
+import I18n from './i18n';

 class Poll extends React.Component {

@@ -54,7 +55,7 @@ componentDidMount() {
          <TouchableOpacity  onPress={()=>Linking.openURL("https://google.com")}>
            <Image source={require('./assets/polls.png')} style={{marginTop: 50, height: 300, width: 300, tintColor: 'red'}}/>
          </TouchableOpacity>
-          <Text style ={{fontSize: 20, marginTop: 30}}>Press the image to take the poll!</Text>
+          <Text style ={{fontSize: 20, marginTop: 30}}>{I18n.t('polls.textInPoll')}</Text>
        </View>
      </View>
 		)
@@ -37,7 +37,6 @@ class Resources extends React.Component {
 			<ScrollView style = {{backgroundColor: 'white'}}>
 				<ResourceLink url='https://classroom.mcpsmd.org/' img={require('./assets/canvaslogo.png')} name='MyMCPS Classroom'/>
 				<ResourceLink url='https://md-mcps-psv.edupoint.com/Home_PXP2.aspx' img={require('./assets/studentvue.jpg')} name='StudentVUE'/>
-				<ResourceLink url='https://mbhs.edu/newsevents/Announcements/Montgomery%20Blair%20High%20School%20Final%20Bell%20Schedule%20.pdf' img={require('./assets/schedule.jpg')} name='1st Semester Schedule'/>
 				<ResourceLink url='https://student.naviance.com/mbhs' img={require('./assets/naviance.png')} name='Naviance'/>
 				<ResourceLink url='https://blairblazersathletics.com/' img={require('./assets/athletics.jpg')} name='Blair Athletics'/>
 				<ResourceLink url='https://classroom.google.com/u/0/h' img={require('./assets/googleclassroom.jpg')} name='Google Classroom'/>
@@ -22,6 +22,7 @@ import { NavigationContainer } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
 import styles from './styles/liststyles';
 import { url } from './resources/fetchInfo.json';
+import I18n from './i18n';

 const Stack = createStackNavigator();

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
  SafeAreaView,
  StyleSheet,
@@ -9,6 +9,8 @@ import {
  Modal,
  TouchableHighlight,
  Image,
+  FlatList,
+  TouchableOpacity,
 } from 'react-native';

 import {
@@ -18,24 +20,74 @@ import {
  DebugInstructions,
  ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
+
 import styles from './styles/morestyles'
+import LinearGradient from 'react-native-linear-gradient'

+import { NavigationContainer } from '@react-navigation/native'
+import { createStackNavigator } from '@react-navigation/stack'
+import I18n from './i18n';
+import Language from './Language'

-class Settings extends React.Component {
-  constructor(props) {
+const Stack = createStackNavigator()
+
+class SettingSwitch extends React.Component {
+	constructor(props) {
 		super(props)
-		this.state = {
-			data: [],
-			isLoading:true
-		}
+		this.props = props
 	}
-  
+	
 	render() {
 		return (
-      <View>
-
-      </View>
+			<View style={{flex:1,backgroundColor:'red'}}>
+				<FlatList
+					data={[
+						{name:"Language",key:"language"},
+					]}
+					renderItem={({item})=>
+						<TouchableOpacity style={styles.moreitem} onPress={()=>this.props.navigation.navigate(item.key)}>
+							<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 (
+			<NavigationContainer independent={true}>
+				<Stack.Navigator>
+					<Stack.Screen 
+						name="Chooser" 
+						component={SettingSwitch}
+						options={{
+							title:'Settingss',
+							headerTitleStyle:styles.headerTitle,
+							headerBackground: ()=>background
+						}}
+					/>
+					<Stack.Screen 
+						name="language" 
+						component={Language}
+						options={{
+							title:'Language',
+							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							headerLeft:null,
+							headerBackground: ()=>background
+						}}
+					/>
+				</Stack.Navigator>
+			</NavigationContainer>
+		)
+	}
+}
+
 export default Settings;
@@ -23,6 +23,7 @@ import {
 import { SearchBar } from 'react-native-elements';
 import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
+import I18n from './i18n';

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

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