Feat/10

app/(tabs)/_layout.tsx

@@ -1,4 +1,5 @@
 import { Tabs } from 'expo-router';
+import { useTranslation } from 'react-i18next';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { TabbarBackground } from '../../components/tabbar/tabbar-background';
@@ -10,6 +11,7 @@ import { colors } from '../../theme/colors';
 export default function TabsLayout() {
   useNotificationObserver();
   const { top, bottom, left, right } = useSafeAreaInsets();
+  const { t } = useTranslation();
   return (
     <Tabs
       initialRouteName='home'
@@ -40,21 +42,21 @@ export default function TabsLayout() {
       <Tabs.Screen
         name='home'
         options={{
-          title: 'Főoldal',
+          title: t('tabbar.home'),
           tabBarIcon: ({ focused }) => <TabbarIcon focused={focused} name='home' />,
         }}
       />
       <Tabs.Screen
         name='presentation'
         options={{
-          title: 'Programterv',
+          title: t('tabbar.schedule'),
           tabBarIcon: ({ focused }) => <TabbarIcon focused={focused} name='calendar' />,
         }}
       />
       <Tabs.Screen
         name='map'
         options={{
-          title: 'Térkép',
+          title: t('tabbar.map'),
           tabBarIcon: ({ focused }) => <TabbarIcon focused={focused} name='map' />,
         }}
       />

app/(tabs)/home/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Screen } from '../../../components/base/screen';
 import { ScrollContent } from '../../../components/base/scroll-content';
@@ -17,20 +18,21 @@ import { useNews } from '../../../hooks/use-news';
 export default function HomePage() {
   const conference = useConference();
   const news = useNews();
+  const { t } = useTranslation();
   return (
     <Screen analyticsScreenName='home'>
       <Header>
-        <Title>Simonyi Konferencia</Title>
+        <Title>{t('home.mainTitle')}</Title>
       </Header>
       <ScrollContent>
-        <SectionTitle>Előadások</SectionTitle>
+        <SectionTitle>{t('home.presentationTitle')}</SectionTitle>
         {conference.isLoading && <PresentationItemSkeletonList />}
-        {conference.isError && <ErrorMessage>Nem sikerült betölteni az előadásokat</ErrorMessage>}
+        {conference.isError && <ErrorMessage>{t('home.error')}</ErrorMessage>}
         {!conference.isError && !conference.isLoading && (
           <HomePresentationList presentations={conference.data?.presentations ?? []} />
         )}
         <Separator />
-        <SectionTitle>Hírek</SectionTitle>
+        <SectionTitle>{t('home.newsTitle')}</SectionTitle>
         {news.isLoading && <NewsItemSkeletonList />}
         {news.data && <HomeNewsList news={news.data.news} />}
       </ScrollContent>

app/(tabs)/map.tsx

@@ -1,26 +1,30 @@
 import { ReactNativeZoomableViewWithGestures } from '@openspacelabs/react-native-zoomable-view';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Screen } from '../../components/base/screen';
 import { Header } from '../../components/common/header';
 import { Title } from '../../components/common/title';
 import { Map } from '../../components/map/map';
 import { ResourceSheet } from '../../components/map/resource-sheet';
-import { MapResources } from '../../content/map-resources.content';
+import { MapResources_en } from '../../content/map-resources-en.content';
+import { MapResources_hu } from '../../content/map-resources-hu.content';
 import { MapResource } from '../../types/map.type';
 
 export default function MapPage() {
+  const { t } = useTranslation();
   const [selectedResource, setSelectedResource] = useState<MapResource>();
 
   const onSelectedResource = (id: string) => {
-    const res = MapResources.find((r) => r.id === id);
+    const localizedResource = t('map.key') === 'hu' ? MapResources_hu : MapResources_en;
+    const res = localizedResource.find((r) => r.id === id);
     setSelectedResource(res);
   };
 
   return (
     <Screen analyticsScreenName='map'>
       <Header>
-        <Title>Térkép</Title>
+        <Title>{t('tabbar.map')}</Title>
       </Header>
       <ReactNativeZoomableViewWithGestures initialZoom={0.5} maxZoom={2} contentHeight={1332} contentWidth={846}>
         <Map selectedResource={selectedResource?.id} onSelectedResource={onSelectedResource} />

app/(tabs)/presentation/favorite-presentations.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Screen } from '../../../components/base/screen';
 import { ErrorMessage } from '../../../components/common/error-message';
@@ -10,14 +11,15 @@ import { useFavoritePresentationsList } from '../../../hooks/use-favorite-presen
 
 export default function FavoritePresentationsScreen() {
   const { data, isLoading, isError } = useFavoritePresentationsList();
+  const { t } = useTranslation();
   return (
     <Screen analyticsScreenName='favorite-presentations'>
       <Header>
-        <Title>Kedvenc előadásaim</Title>
+        <Title>{t('presentations.favoritesTitle')}</Title>
       </Header>
       {isLoading && <PresentationItemSkeletonList />}
       {!isError && !isLoading && <PresentationList presentations={data ?? []} />}
-      {isError && <ErrorMessage>Nem sikerült betölteni az előadásokat</ErrorMessage>}
+      {isError && <ErrorMessage>{t('presentations.error')}</ErrorMessage>}
     </Screen>
   );
 }

app/(tabs)/presentation/index.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'expo-router';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Screen } from '../../../components/base/screen';
 import { ErrorMessage } from '../../../components/common/error-message';
@@ -12,19 +13,20 @@ import { useConference } from '../../../hooks/use-conference';
 
 export default function PresentationListPage() {
   const { data, isError, isLoading } = useConference();
+  const { t } = useTranslation();
   return (
     <Screen analyticsScreenName='presentation'>
       <Header>
-        <Title>Programterv</Title>
+        <Title>{t('presentations.title')}</Title>
       </Header>
       <Link href='/presentation/favorite-presentations' asChild>
         <StyledButton variant='outline' rightIcon='arrow-right' className='mt-4 mx-5'>
-          Kedvenceim
+          {t('presentations.favorites')}
         </StyledButton>
       </Link>
       {isLoading && <PresentationItemSkeletonList />}
       {!isError && !isLoading && <PresentationList presentations={data?.presentations ?? []} />}
-      {isError && <ErrorMessage>Nem sikerült betölteni az előadásokat</ErrorMessage>}
+      {isError && <ErrorMessage>{t('presentations.error')}</ErrorMessage>}
     </Screen>
   );
 }

app/[...unmatched].tsx

@@ -1,4 +1,5 @@
 import { useRouter } from 'expo-router';
+import { useTranslation } from 'react-i18next';
 import { SafeAreaView } from 'react-native';
 
 import { StyledButton } from '../components/common/styled-button';
@@ -8,14 +9,15 @@ import { usePageView } from '../utils/analytics.utils';
 
 export default function Unmatched() {
   const { canGoBack, back } = useRouter();
+  const { t } = useTranslation();
   usePageView('unmatched');
   return (
     <SafeAreaView className='items-center justify-center flex-grow space-y-5'>
-      <Title className='text-center'>Ismeretlen képernyőre jutottál</Title>
-      <Subtitle className='text-center'>Ilyet mi itt nem tartunk</Subtitle>
+      <Title className='text-center'>{t('unmatched.main')}</Title>
+      <Subtitle className='text-center'>{t('unmatched.sub')}</Subtitle>
       {canGoBack() && (
         <StyledButton leftIcon='arrow-left' onPress={back}>
-          Vissza
+          {t('unmatched.back')}
         </StyledButton>
       )}
     </SafeAreaView>

app/index.tsx

@@ -1,5 +1,12 @@
 import { Redirect } from 'expo-router';
+import { useEffect } from 'react';
+
+import i18n from '../services/i18-next';
 
 export default function App() {
+  useEffect(() => {
+    i18n.changeLanguage('en');
+  }, []);
+
   return <Redirect href='/(tabs)/home' />;
 }

components/common/error-boundary.tsx

@@ -1,4 +1,5 @@
 import { ErrorBoundaryProps } from 'expo-router';
+import { useTranslation } from 'react-i18next';
 import { ScrollView, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -9,6 +10,7 @@ import { Title } from './title';
 
 export function ErrorBoundary(props: ErrorBoundaryProps) {
   const { top, bottom, left, right } = useSafeAreaInsets();
+  const { t } = useTranslation();
   usePageView('error');
   return (
     <View
@@ -20,13 +22,13 @@ export function ErrorBoundary(props: ErrorBoundaryProps) {
         paddingRight: right + 20,
       }}
     >
-      <Title className='text-white'>Hopp, ez elszállt :(</Title>
+      <Title className='text-white'>{t('errBoundary.main')}</Title>
       <ScrollView>
         <Subtitle className='text-white/50 flex-shrink'>{props.error.message}</Subtitle>
       </ScrollView>
-      <Subtitle className='text-white/50'>Kérlek ezt jelezd a fejlesztőknek!</Subtitle>
+      <Subtitle className='text-white/50'>{t('errBoundary.sub')}</Subtitle>
       <StyledButton onPress={props.retry} className='bg-blue-900'>
-        Újrapróbálkozás
+        {t('errBoundary.retry')}
       </StyledButton>
     </View>
   );

components/news/elements/news-item.tsx

@@ -1,5 +1,6 @@
 import { Feather } from '@expo/vector-icons';
 import { useNavigation } from 'expo-router';
+import { useTranslation } from 'react-i18next';
 import { PressableProps, View } from 'react-native';
 import { NativeStackNavigationProp } from 'react-native-screens/native-stack';
 
@@ -14,6 +15,7 @@ interface NewsItemProps extends Omit<PressableProps, 'onPress' | 'onPressIn' | '
 
 export function NewsItem({ newsItem, ...props }: NewsItemProps) {
   const router = useNavigation<NativeStackNavigationProp<{ 'news-details': { id: string } }>>();
+  const { t } = useTranslation();
   const onPress = () => {
     router.navigate('news-details', { id: newsItem.url });
   };
@@ -22,7 +24,7 @@ export function NewsItem({ newsItem, ...props }: NewsItemProps) {
       {newsItem.highlighted && (
         <View className='flex-row space-x-1 items-center'>
           <Feather name='alert-circle' size={15} color='#ef4444' />
-          <StyledText className='text-red-500'>Kiemelt</StyledText>
+          <StyledText className='text-red-500'>{t('news.highlight')}</StyledText>
         </View>
       )}
       <StyledText className='text-xl' numberOfLines={2}>

components/news/layouts/home-news-list.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next';
+
 import { NewsItemDto } from '../../../types/news-api.type';
 import { StyledText } from '../../base/text';
 import { NewsItem } from '../elements/news-item';
@@ -7,8 +9,9 @@ interface HomeNewsListProps {
 }
 
 export function HomeNewsList({ news }: HomeNewsListProps) {
+  const { t } = useTranslation();
   if (news.length === 0) {
-    return <StyledText className='text-center my-10'>Nincs megjeleníthető hír.</StyledText>;
+    return <StyledText className='text-center my-10'>{t('home.noNews')}</StyledText>;
   }
   return news.map((newsItem, index) => <NewsItem key={index} newsItem={newsItem} />);
 }

components/news/layouts/news-details-page.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next';
+
 import { useNewsItem } from '../../../hooks/use-news-item';
 import { Screen } from '../../base/screen';
 import { ScrollContent } from '../../base/scroll-content';
@@ -14,16 +16,16 @@ interface NewsDetailsPageProps {
 
 export function NewsDetailsPage({ id }: NewsDetailsPageProps) {
   const { data, error, isLoading } = useNewsItem(id);
+  const { t } = useTranslation();
+  if (!data) return <Screen />;
   return (
     <Screen analyticsScreenName={`news/${id}`}>
       <Header>
         {isLoading && <SkeletonTitle />}
         {data?.title && <Title>{data.title}</Title>}
       </Header>
       <ScrollContent>
-        {error && (
-          <ErrorMessage>Hiba történt a hír betöltése közben. Lehet, hogy ez a hír nem is létezik?</ErrorMessage>
-        )}
+        {error && <ErrorMessage>{t('news.error')}</ErrorMessage>}
         {isLoading && <SkeletonParagraph />}
         <StyledText className='text-xl'>{data?.content}</StyledText>
       </ScrollContent>

components/schedule/layouts/home-presentation-list.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { PresentationDto } from '../../../types/conference-api.type';
 import { isPresentationCurrent, isPresentationUpcoming } from '../../../utils/presentation.utils';
@@ -14,9 +15,10 @@ export function HomePresentationList({ presentations }: HomePresentationListProp
     () => presentations.filter((event) => isPresentationUpcoming(event) || isPresentationCurrent(event)),
     [presentations]
   );
+  const { t } = useTranslation();
 
   if (filteredPresentations.length === 0) {
-    return <StyledText className='mx-5 text-center my-10'>Nincs megjeleníthető előadás.</StyledText>;
+    return <StyledText className='mx-5 text-center my-10'>{t('home.empty')}</StyledText>;
   }
 
   return filteredPresentations.map((presentation, index) => (

components/schedule/layouts/presentation-list.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { FlatList } from 'react-native';
 
 import { PresentationDto } from '../../../types/conference-api.type';
@@ -9,8 +10,9 @@ interface PresentationListProps {
 }
 
 export function PresentationList({ presentations }: PresentationListProps) {
+  const { t } = useTranslation();
   if (presentations.length === 0) {
-    return <StyledText className='mx-5 text-center my-10'>Nincs megjeleníthető előadás.</StyledText>;
+    return <StyledText className='mx-5 text-center my-10'>{t('presentations.empty')}</StyledText>;
   }
   return (
     <FlatList