Front: Basic i18n configuration

2022-08-08 11:40:46 +02:00
parent 04f3d5d7ef
commit e7af552656
7 changed files with 72 additions and 32 deletions
@@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
 import store from './state/Store';
 import { Router } from './Navigation';
-
+import './i18n/i18n';
 const queryClient = new QueryClient();

 export default function App() {
@@ -0,0 +1,22 @@
+import { en, fr } from './translations';
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+i18n
+	.use(initReactI18next)
+	.init({
+		resources: {
+			en: {
+				translation: en
+			},
+			fr: {
+				translation: fr
+			}
+		},
+		lng: "en",
+		fallbackLng: "en",
+		interpolation: {
+			escapeValue: false
+		}
+	});
+export default i18n;
@@ -0,0 +1,11 @@
+export const en = {
+	welcome: 'Welcome to Chromacase',
+	signoutBtn: 'Sign out',
+	signinBtn: 'Sign in',
+};
+
+export const fr: typeof en = {
+	welcome: 'Bienvenue sur Chromacase',
+	signoutBtn: 'Se déconnecter',
+	signinBtn: 'Se connecter',
+};
@@ -22,13 +22,13 @@
    "@types/react-test-renderer": "^18.0.0",
    "expo": "~45.0.0",
    "expo-dev-client": "~1.0.0",
-    "expo-localization": "^13.1.0",
    "expo-status-bar": "~1.3.0",
-    "i18n-js": "^4.0.2",
+    "i18next": "^21.8.16",
    "jest": "^26.6.3",
    "jest-expo": "^45.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
+    "react-i18next": "^11.18.3",
    "react-native": "0.68.2",
    "react-native-paper": "^4.12.2",
    "react-native-safe-area-context": "4.2.4",
@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { Text, View } from 'react-native';
 import { Button } from "react-native-paper";
 import { useDispatch } from "react-redux";
@@ -6,12 +7,12 @@ import { setUserToken } from "../state/UserSlice";

 const AuthenticationView = () => {
  const dispatch = useDispatch();
+  const { t } = useTranslation();
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
-      <Text style={{ textAlign: "center" }}>Welcom to Chromacase</Text>
-      <Text style={{ textAlign: "center" }}>This is the Authentication Screen</Text>
+      <Text style={{ textAlign: "center" }}>{ t('welcome') }</Text>
      <Button onPress={() => dispatch(setUserToken('kkkk'))}>
-        Tap here to login
+      { t('signinBtn') }
      </Button>
    </View>
  );
@@ -1,15 +1,19 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { Text, View } from 'react-native';
 import { Button } from "react-native-paper";
 import { useDispatch } from "react-redux";
+import i18n from "../i18n/i18n";
 import { unsetUserToken } from "../state/UserSlice";

 const HomeView = () => {
  const dispatch = useDispatch();
+  const { t } = useTranslation();
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Text style={{ textAlign: "center" }}>This is the Home Screen</Text>
-      <Button onPress={() => dispatch(unsetUserToken())}>Log out</Button>
+      <Button onPress={() => dispatch(unsetUserToken())}>{ t('signoutBtn') }</Button>
+      <Button onPress={() => i18n.changeLanguage('fr')}>Change language</Button>
    </View>
  );
 }
@@ -1030,7 +1030,7 @@
    pirates "^4.0.5"
    source-map-support "^0.5.16"

-"@babel/runtime@^7.12.1", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.14.5", "@babel/runtime@^7.17.2", "@babel/runtime@^7.9.2":
  version "7.18.9"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
  integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
@@ -2675,11 +2675,6 @@ big-integer@1.6.x:
  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
  integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==

-bignumber.js@*:
-  version "9.0.2"
-  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.0.2.tgz#71c6c6bed38de64e24a65ebe16cfcf23ae693673"
-  integrity sha512-GAcQvbpsM0pUb0zw1EI0KhQEZ+lRwR5fYaAp3vPOYuP7aDvGy6cVN6XHLauvF8SOga2y0dcLcjt3iQDTSEliyw==
-
 bl@^4.1.0:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
@@ -3801,13 +3796,6 @@ expo-keep-awake@~10.1.1:
  resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-10.1.1.tgz#03023c130f7e3824b738e3fdd5353b8a2c0c1980"
  integrity sha512-9zC0sdhQljUeMr2yQ7o4kzEZXVAy82fFOAZE1+TwPL7qR0b0sphe7OJ5T1GX1qLcwuVaJ8YewaPoLSHRk79+Rg==

-expo-localization@^13.1.0:
-  version "13.1.0"
-  resolved "https://registry.yarnpkg.com/expo-localization/-/expo-localization-13.1.0.tgz#a69eac5dfee3f1e7b3a443bdd61fd38de5e4e28b"
-  integrity sha512-UFQShIiygfAeRoK3vowYzulWx0a5sM/BtkjVppPII8ZUUDKu2MkGS0uuwGkPyp2zFx3StJ2RxNFISU8cLPSk9w==
-  dependencies:
-    rtl-detect "^1.0.2"
-
 expo-manifests@~0.3.0:
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/expo-manifests/-/expo-manifests-0.3.0.tgz#724e85a4e726cb1ef775f9846c9ecb8d243a17d7"
@@ -4419,6 +4407,13 @@ html-escaper@^2.0.0:
  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==

+html-parse-stringify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+  integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+  dependencies:
+    void-elements "3.1.0"
+
 http-errors@1.7.2:
  version "1.7.2"
  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
@@ -4468,13 +4463,12 @@ hyphenate-style-name@^1.0.2, hyphenate-style-name@^1.0.4:
  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==

-i18n-js@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/i18n-js/-/i18n-js-4.0.2.tgz#31a62520204e292675bd72e82abdfeeb9aed5f20"
-  integrity sha512-81geA9vPvWe4NI2uL8Ve+/2jM03Sj/IvGgFHPxij7DbSXbG3CfChRK1vBj2h2IRl6eVRZf3Eq4ug3PgeeWUUPA==
+i18next@^21.8.16:
+  version "21.8.16"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-21.8.16.tgz#31fe4682e4e2077dbf229a88e5a58b7020e4ddc8"
+  integrity sha512-acJLCk38YMfEPjBR/1vS13SFY7rBQLs9E5m1tSRnWc9UW3f+SZszgH+NP1fZRA1+O+CdG2eLGGmuUMJW52EwzQ==
  dependencies:
-    bignumber.js "*"
-    lodash "*"
+    "@babel/runtime" "^7.17.2"

 iconv-lite@0.4.24:
  version "0.4.24"
@@ -5690,7 +5684,7 @@ lodash.throttle@^4.1.1:
  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==

-lodash@*, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.7.0:
+lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.7.0:
  version "4.17.21"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -6944,6 +6938,14 @@ react-freeze@^1.0.0:
  resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d"
  integrity sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==

+react-i18next@^11.18.3:
+  version "11.18.3"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.18.3.tgz#50211810bcc9fdea2d70c8aefdfff5f1eb39a923"
+  integrity sha512-EttTX31HbqzZymUM3SIrMPuvamfSXFZVsDHm/ZAqoDfTLjhzlwyxqfbDNxcKNAGOi2mjZaXfR7hSNMlvLNpB/g==
+  dependencies:
+    "@babel/runtime" "^7.14.5"
+    html-parse-stringify "^3.0.1"
+
 "react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2:
  version "17.0.2"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
@@ -7392,11 +7394,6 @@ rsvp@^4.8.4:
  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
  integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==

-rtl-detect@^1.0.2:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/rtl-detect/-/rtl-detect-1.0.4.tgz#40ae0ea7302a150b96bc75af7d749607392ecac6"
-  integrity sha512-EBR4I2VDSSYr7PkBmFy04uhycIpDKp+21p/jARYXlCSjQksTBQcJ0HFUPOO79EPPH5JS6VAhiIQbycf0O3JAxQ==
-
 run-parallel@^1.1.9:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
@@ -8456,6 +8453,11 @@ vlq@^1.0.0:
  resolved "https://registry.yarnpkg.com/vlq/-/vlq-1.0.1.tgz#c003f6e7c0b4c1edd623fd6ee50bbc0d6a1de468"
  integrity sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==

+void-elements@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
+
 w3c-hr-time@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"