diff --git a/components/Home.js b/components/Home.js
index 0a57b6b..6f2acea 100644
--- a/components/Home.js
+++ b/components/Home.js
@@ -16,11 +16,11 @@ import { determinePredictionText, formatWithOrdinalSuffix } from './helpers/home
import { Colors, Fonts, Sizes, Spacing } from '../styles'
import { LocalDate } from 'js-joda'
-import { useTranslation } from 'react-i18next'
+import useComponentTranslation from '../hooks/useComponentTranslation'
const Home = ({ navigate, setDate }) => {
- const { t } = useTranslation();
+ const { t } = useComponentTranslation('components.Home');
function navigateToCycleDayView() {
setDate(todayDateString)
@@ -46,14 +46,14 @@ const Home = ({ navigate, setDate }) => {
{cycleDayNumber &&
{cycleDayText}
- {t('components.Home.cycleDay')}
+ {t('cycleDay')}
}
{phase &&
{formatWithOrdinalSuffix(phase)}
- {t('components.Home.cyclePhase')}
+ {t('cyclePhase')}
{status}
@@ -63,7 +63,7 @@ const Home = ({ navigate, setDate }) => {
{prediction}
{phase && (
diff --git a/hooks/useComponentTranslation.js b/hooks/useComponentTranslation.js
new file mode 100644
index 0000000..968491d
--- /dev/null
+++ b/hooks/useComponentTranslation.js
@@ -0,0 +1,11 @@
+import { useTranslation } from "react-i18next"
+
+export default function useComponentTranslation(componentPath) {
+ const { t, i18n } = useTranslation();
+ function translate(code, options) {
+ const mergedPath = `${componentPath}.${code}`;
+ const translation = t(mergedPath, options);
+ return translation !== mergedPath ? translation : t(code, options);
+ }
+ return { t: translate, i18n };
+}
\ No newline at end of file