Adding i18n translation files

apps/app/src/app/translationComponent.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useTranslation } from 'react-i18next';
+
+export const translationComponent = () => {
+  const [ t ] = useTranslation();
+
+  return (
+      <Text>{t('PROVE_IDENTITY.TITLE')}</Text>
+  );
+}

libs/localization/assets/en.json

@@ -0,0 +1,15 @@
+{
+    //LANDING PAGE
+    "LANDING_PAGE": {
+      "BODY": "Set up your NHS Digital Staff Passport",
+      "BUTTON": "Continue"
+    },
+    //PROVE IDENTITY
+    "PROVE_IDENTITY": {
+      "TITLE": "NHS Digital Staff Passport",
+      "CARD": {
+        "HEADER": "Prove who you are to get full access",
+        "BODY": "You'll need to prove your identity before you can use NHS Digital Staff Passport"
+      } 
+    }
+}

libs/localization/src/index.ts

@@ -1 +1,2 @@
 export * from './lib/localization';
+export * from './lib/TranslationProvider';

libs/localization/src/lib/TranslationProvider.tsx

@@ -0,0 +1,6 @@
+import { I18nextProvider, I18nextProviderProps } from 'react-i18next';
+import { i18n } from './i18n/i18n';
+
+export const TranslationProvider = ({...props}: Omit<I18nextProviderProps, 'i18n'>) => {
+    return <I18nextProvider i18n={i18n} {...props} />;
+};

libs/localization/src/lib/i18n/i18n.ts

@@ -0,0 +1,22 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import 'intl-pluralrules';
+import en from './../../../assets/en.json';
+
+i18n
+    .use(initReactI18next)
+    .init({
+        compatibilityJSON: 'v3',
+        fallbackLng: 'en',
+        debug: false,
+        interpolation: {
+            escapeValue: false,
+        },
+        resources: {
+            en: {
+                translation: en,
+            },
+        },
+    });
+
+export {i18n};

libs/localization/tsconfig.json

@@ -7,7 +7,9 @@
     "noImplicitOverride": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "noPropertyAccessFromIndexSignature": true
+    "noPropertyAccessFromIndexSignature": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true
   },
   "files": [],
   "include": [],

tsconfig.base.json

@@ -12,11 +12,12 @@
     "module": "esnext",
     "lib": ["es2020", "dom"],
     "skipLibCheck": true,
+    "jsx": "react-native",
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@digital-staff-passport/features": ["libs/data-access/src/index.ts"],
-      "@digital-staff-passport/localization": [
+      "@data-access": ["libs/data-access/src/index.ts"],
+      "@localization": [
         "libs/localization/src/index.ts"
       ],
       "@digital-staff-passport/ui": ["libs/ui/src/index.ts"]