Front: Language Slice: Call i18n method to change instance's language

front/state/LanguageSlice.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { AvailableLanguages, DefaultLanguage } from "../i18n/i18n";
+import i18n, { AvailableLanguages, DefaultLanguage } from "../i18n/i18n";
 
 
 export const languageSlice = createSlice({
@@ -10,6 +10,7 @@ export const languageSlice = createSlice({
 	reducers: {
 		useLanguage: (state, action: PayloadAction<AvailableLanguages>) => {
 			state.value = action.payload;
+			i18n.changeLanguage(state.value);
 		},
 		resetLanguage: (state) => {
 			state.value = DefaultLanguage;

front/views/HomeView.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { Text, View } from 'react-native';
 import { Button } from "react-native-paper";
-import { useDispatch, useSelector, useStore } from "react-redux";
-import i18n, { AvailableLanguages, translate } from "../i18n/i18n";
+import { useDispatch, useSelector } from "react-redux";
+import i18n, { AvailableLanguages, DefaultLanguage, translate } from "../i18n/i18n";
 import { useLanguage } from "../state/LanguageSlice";
 import { unsetUserToken } from "../state/UserSlice";
 
@@ -14,15 +14,17 @@ const HomeView = () => {
       <Text style={{ textAlign: "center" }}>This is the Home Screen</Text>
       <Button onPress={() => dispatch(unsetUserToken())}>{ translate('signoutBtn') }</Button>
       <Button onPress={() => {
+        let newLanguage = DefaultLanguage;
         switch (language) {
           case 'en':
-            dispatch(useLanguage('fr'));
+            newLanguage = 'fr';
             break;
           default:
-            dispatch(useLanguage('en'));
             break;
         }
+        dispatch(useLanguage(newLanguage));
       }}>Change language</Button>
+      <Text style={{ textAlign: "center" }}>Current language: { language }</Text>
     </View>
   );
 }