615 Use translation library for bottom menu

components/menu/index.js

@@ -6,20 +6,23 @@ import MenuItem from './menu-item'
 
 import { Containers } from '../../styles'
 import { pages } from '../pages'
+import { useTranslation } from 'react-i18next'
 
 const Menu = ({ currentPage, navigate }) => {
   const menuItems = pages.filter((page) => page.isInMenu)
 
+  const { t } = useTranslation(null, { keyPrefix: 'bottomMenu' })
+
   return (
     <View style={styles.container}>
-      {menuItems.map(({ icon, label, component }) => {
+      {menuItems.map(({ icon, labelKey, component }) => {
         return (
           <MenuItem
             isActive={component === currentPage}
             onPress={() => navigate(component)}
             icon={icon}
-            key={label}
-            label={label}
+            key={labelKey}
+            label={t(labelKey)}
           />
         )
       })}

components/pages.js

@@ -13,21 +13,21 @@ export const pages = [
     component: 'Calendar',
     icon: 'calendar',
     isInMenu: true,
-    label: 'Calendar',
+    labelKey: 'calendar',
     parent: 'Home',
   },
   {
     component: 'Chart',
     icon: 'chart',
     isInMenu: true,
-    label: 'Chart',
+    labelKey: 'chart',
     parent: 'Home',
   },
   {
     component: 'Stats',
     icon: 'statistics',
     isInMenu: true,
-    label: 'Stats',
+    labelKey: 'stats',
     parent: 'Home',
   },
   {

i18n/en.json

@@ -1,4 +1,9 @@
 {
+  "bottomMenu": {
+    "calendar": "Calendar",
+    "chart": "Chart",
+    "stats": "Stats"
+  },
   "cycleDay": {
     "symptomBox": {
       "bleeding": "Bleeding",