[mobile] add localization support

mobile/App.tsx

@@ -4,6 +4,7 @@ import { View, Text, Button } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { useTranslation } from 'react-i18next';
 
 type RootStackParamList = {
   Home: undefined,
@@ -25,9 +26,11 @@ function HomeScreen({ navigation, route }: HomeScreenProps) {
 }
 
 function LobyScreen({ navigation, route }: LobyScreenProps) {
+  const { t } = useTranslation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Loby Screen</Text>
+      <Text>{t('hello')}</Text>
     </View>
   );
 }

mobile/index.js

@@ -5,5 +5,6 @@
 import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
+import './src/localization/i18n';
 
 AppRegistry.registerComponent(appName, () => App);

mobile/src/localization/en.ts

@@ -0,0 +1,5 @@
+export default {
+    translation: { 
+        hello: 'Hello',
+    }
+};

mobile/src/localization/i18n.ts

@@ -0,0 +1,21 @@
+// https://medium.com/@yashpalraj/implement-i18n-in-react-native-application-a4c573e2e2a6
+
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import en from './en';
+import tr from './tr';
+const resources = { // list of languages
+    en,
+    tr,
+};
+i18n.use(initReactI18next) // passes i18n down to react-i18next
+    .init({
+        compatibilityJSON: 'v3', //To make it work for Android devices, add this line.
+        resources,
+        lng: 'en', // default language to use.
+        // if you're using a language detector, do not define the lng option
+        interpolation: {
+            escapeValue: false,
+        },
+    });
+export default i18n;

mobile/src/localization/tr.ts

@@ -0,0 +1,5 @@
+export default {
+    translation: { 
+        hello: 'Merhaba',
+    }
+};