tab navigator localization

kanzitelli · Mar 10, 2021 · bbf604a · bbf604a
1 parent bc9f254
commit bbf604a
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 13 deletions.
diff --git a/src/screens/main/index.tsx b/src/screens/main/index.tsx
@@ -4,20 +4,23 @@ import { Ionicons } from '@expo/vector-icons';
 import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 import { navBarStyle } from '../../utils/help';
+import { useServices } from '../../services';
 
 import MainScreen from './main';
 import SettingsScreen from './settings';
 
 const MainNavigator: React.FC<NavigatorProps> = ({
 }) => {
+  const { t } = useServices();
+
   const MainStack = createNativeStackNavigator();
   const Main = () => (
     <MainStack.Navigator screenOptions={navBarStyle()}>
       <MainStack.Screen
         name={'MainScreen'}
         component={MainScreen}
         options={{
-          title: 'Main',
+          title: t.do('main.title'),
         }}
       />
     </MainStack.Navigator>
@@ -30,7 +33,7 @@ const MainNavigator: React.FC<NavigatorProps> = ({
         name={'SettingsScreen'}
         component={SettingsScreen}
         options={{
-          title: 'Settings',
+          title: t.do('settings.title'),
         }}
       />
     </SettingsStack.Navigator>
@@ -61,12 +64,12 @@ const MainNavigator: React.FC<NavigatorProps> = ({
       <Tab.Screen
         name={'Main'}
         component={Main}
-        options={{ title: 'Main' }}
+        options={{ title: t.do('main.title') }}
       />
       <Tab.Screen
         name={'Settings'}
         component={Settings}
-        options={{ title: 'Settings' }}
+        options={{ title: t.do('settings.title') }}
       />
     </Tab.Navigator>
   )

diff --git a/src/screens/main/index.web.tsx b/src/screens/main/index.web.tsx
@@ -3,19 +3,23 @@ import React from 'react';
 import { Ionicons } from '@expo/vector-icons';
 import { createStackNavigator } from '@react-navigation/stack';
 
+import { useServices } from '../../services';
+
 import MainScreen from './main';
 import SettingsScreen from './settings';
 
 const MainNavigator: React.FC<NavigatorProps> = ({
 }) => {
+  const { t } = useServices();
+
   const MainStack = createStackNavigator();
   const Main = () => (
     <MainStack.Navigator>
       <MainStack.Screen
         name={'MainScreen'}
         component={MainScreen}
         options={{
-          title: 'Main',
+          title: t.do('main.title'),
         }}
       />
     </MainStack.Navigator>
@@ -28,7 +32,7 @@ const MainNavigator: React.FC<NavigatorProps> = ({
         name={'SettingsScreen'}
         component={SettingsScreen}
         options={{
-          title: 'Settings',
+          title: t.do('settings.title'),
         }}
       />
     </SettingsStack.Navigator>
@@ -59,12 +63,12 @@ const MainNavigator: React.FC<NavigatorProps> = ({
       <Tab.Screen
         name={'Main'}
         component={Main}
-        options={{ title: 'Main' }}
+        options={{ title: t.do('main.title') }}
       />
       <Tab.Screen
         name={'Settings'}
         component={Settings}
-        options={{ title: 'Settings' }}
+        options={{ title: t.do('settings.title') }}
       />
     </Tab.Navigator>
   )

diff --git a/src/screens/main/settings.tsx b/src/screens/main/settings.tsx
@@ -26,25 +26,25 @@ const SettingsScreen: React.FC<SettingsScreenProps> = observer(({
 }) => {
   // const { param } = route.params;
   const { ui } = useStores();
-  const { auth } = useServices();
+  const { auth, t } = useServices();
 
   const _openGithub = () =>
     Linking.openURL(C.links.github);
 
   return (
     <ScrollContainer>
       <Button noBg
-        title='Toggle theme'
+        title={t.do('buttons.toggleTheme')}
         onPress={ui.toggleThemeMode}
       />
 
       <Button noBg
-        title='Github'
+        title={t.do('buttons.github')}
         onPress={_openGithub}
       />
 
       <Button shadow
-        title='Logout'
+        title={t.do('buttons.logOut')}
         onPress={auth.logOut}
       />
     </ScrollContainer>

diff --git a/src/services/translate/translations/en.json b/src/services/translate/translations/en.json
@@ -2,7 +2,9 @@
   "buttons": {
     "signUp": "Sign Up",
     "logIn": "Login",
-    "toggleTheme": "Toggle Theme"
+    "logOut": "Logout",
+    "toggleTheme": "Toggle Theme",
+    "github": "Github"
   },
 
   "landing": {
@@ -22,6 +24,14 @@
     }
   },
 
+  "main": {
+    "title": "Main"
+  },
+
+  "settings": {
+    "title": "Settings"
+  },
+
   "example": {
     "title": "Example",
     "text": "Example Text"

diff --git a/src/services/translate/translations/ru.json b/src/services/translate/translations/ru.json
@@ -2,6 +2,7 @@
   "buttons": {
     "signUp": "Регистрация",
     "logIn": "Логин",
+    "logOut": "Выйти",
     "toggleTheme": "Поменять тему"
   },
 
@@ -20,5 +21,18 @@
       "email": "Email",
       "password": "Пароль"
     }
+  },
+
+  "main": {
+    "title": "Главная"
+  },
+
+  "settings": {
+    "title": "Настройки"
+  },
+
+  "example": {
+    "title": "Пример",
+    "text": "Пример Текст"
   }
 }