Dynamically toggle language and re-render react-native app - react-native

Question

I am learning react-native by reading some blogs and trying to replicate the concepts on a test application that uses Drawer (Home and About screens), Stack (Home -> Settings) and Tab (Home and About Screens) navigations. So far, so good.
I am using 'react-native-localize', 'i18n-js' and 'lodash.memoize' in order to make the app multi language. During its startup, the application successfully determines the current locale from the device settings and display the correct contents based on the locale.
However, I want to be able to change it dynamically by pressing the toggle language button on Settings screen. I don't know how to change the locale and make the whole application (drawer menu option names, bottom tab names and all screens text contents) re-render and display text from the new locale. Could someone help me, please?
App.js
import * as i18n from './src/utils/i18n';
const App = () => {
const [locale, setLocale] = useState(i18n.DEFAULT_LANGUAGE);
const localizationContext = useMemo(
() => ({
t: (scope, options) => i18n.t(scope, {locale, ...options}),
locale,
setLocale
}),
[locale],
);
const handleLocalizationChange = useCallback(
(newLocale) => {
const newSetLocale = i18n.setI18nConfig(newLocale);
setLocale(newSetLocale);
},
[locale],
);
useEffect(() => {
handleLocalizationChange();
RNLocalize.addEventListener('change', handleLocalizationChange);
return () => {
RNLocalize.removeEventListener('change', handleLocalizationChange);
};
}, []);
return (
<LocalizationContext.Provider value={localizationContext}>
<NavigationContainer>
<DrawerNavigator localizationChange={handleLocalizationChange}/>
</NavigationContainer>
</LocalizationContext.Provider>
);
};
export default App;
i18n.js
import {I18nManager} from 'react-native';
import * as RNLocalize from 'react-native-localize';
import i18n from 'i18n-js';
import memoize from 'lodash.memoize';
export const DEFAULT_LANGUAGE = 'en';
export const translationGetters = {
'en': () => require('../locales/en.json'),
'es': () => require('../locales/es.json'),
};
export const translate = memoize(
(key, config) => i18n.t(key, config),
(key, config) => (config ? key + JSON.stringify(config) : key),
);
export const t = translate;
export const setI18nConfig = (codeLang = null) => {
// Fallback if no available language fits
const fallback = {languageTag: DEFAULT_LANGUAGE, isRTL: false};
const lang = codeLang ? {languageTag: codeLang, isRTL: false} : null;
const {languageTag, isRTL} = lang
? lang
: RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
fallback;
// Enables fallbacks
i18n.fallbacks = true;
// Clear translation cache
translate.cache.clear();
// Update layout direction
I18nManager.forceRTL(isRTL);
// Set i18n-js config
i18n.translations = {[languageTag]: translationGetters[languageTag]()};
i18n.locale = languageTag;
return languageTag;
};
DrawerNavigation.js
import React, { useContext } from "react";
import { AboutStackNavigator } from "./StackNavigator";
import TabNavigator from "./TabNavigator";
import { createDrawerNavigator } from "#react-navigation/drawer";
import LocalizationContext from '../providers/LocalizationContext';
const Drawer = createDrawerNavigator();
const DrawerNavigator = () => {
const {t} = useContext(LocalizationContext);
return (
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: 'gray',
inactiveTintColor: 'gray',
}}
>
<Drawer.Screen
name="Home"
component={ TabNavigator }
options={{
title: t('title_home')
}}
/>
<Drawer.Screen
name="About"
component={ AboutStackNavigator }
options={{
title: t('title_about')
}}
/>
</Drawer.Navigator>
);
};
export default DrawerNavigator;
StackNavigator.js
import React, { useContext } from "react";
import { createStackNavigator } from "#react-navigation/stack";
import Home from "../screens/Home";
import About from "../screens/About";
import Settings from "../screens/Settings";
import LocalizationContext from '../providers/LocalizationContext';
const Stack = createStackNavigator();
const MainStackNavigator = () => {
const {t} = useContext(LocalizationContext);
return (
<Stack.Navigator screenOptions={screenOptionStyle}>
<Stack.Screen name="Home" component={ Home } options={{ headerShown:false }} />
<Stack.Screen name="About" component={ About } options={{ title: t('title_about') }}/>
<Stack.Screen name="Settings" component={ Settings } options={{ title: t('title_settings') }}/>
</Stack.Navigator>
);
};
const AboutStackNavigator = () => {
const {t} = useContext(LocalizationContext);
return (
<Stack.Navigator screenOptions={screenOptionStyle}>
<Stack.Screen name="About" component={ About } options={{ title: t('title_about') }} />
</Stack.Navigator>
);
};
const SettingsStackNavigator = () => {
const {t} = useContext(LocalizationContext);
return (
<Stack.Navigator screenOptions={screenOptionStyle}>
<Stack.Screen name="Settings" component={ Settings } options={{ title: t('title_settings') }} />
</Stack.Navigator>
);
};
const screenOptionStyle = {
headerStyle: {
backgroundColor: 'white',
},
headerTintColor: "gray",
headerBackTitle: "Back",
};
export {
MainStackNavigator,
AboutStackNavigator,
SettingsStackNavigator
};
TabNavigator.js
import React, { useContext } from 'react';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { MainStackNavigator, AboutStackNavigator } from './StackNavigator';
import LocalizationContext from '../providers/LocalizationContext';
const Tab = createBottomTabNavigator();
const BottomTabNavigator = () => {
const {t} = useContext(LocalizationContext);
return (
<Tab.Navigator
tabBarOptions={{
activeTintColor: 'black',
inactiveTintColor: 'gray',
activeBackgroundColor: 'white',
inactiveBackgroundColor: 'white',
labelStyle: {
fontSize: 12,
},
}} >
<Tab.Screen name="Home" component={ MainStackNavigator } options={{ title: t('title_home') }} />
<Tab.Screen name="About" component={ AboutStackNavigator } options={{ title: t('title_about'), headerShown:false }} />
</Tab.Navigator>
);
}
export default BottomTabNavigator;
Home.js
import React, { useContext } from "react";
import { View, SafeAreaView, StyleSheet, Text, StatusBar } from "react-native";
import { Header } from 'react-native-elements';
import LocalizationContext from '../providers/LocalizationContext';
const Home = ({ navigation }) => {
const {t} = useContext(LocalizationContext);
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor='white' />
<Header
statusBarProps={{ barStyle: 'dark-content', backgroundColor: 'gray' }}
placement="center"
leftComponent={{ icon: 'menu', color: 'white', onPress: () => navigation.openDrawer() }}
centerComponent={{ text: 'My App', style: styles.centerComponent }}
rightComponent={{ icon: 'settings', color: 'white', onPress: () => navigation.navigate("Settings") }}
containerStyle={{ backgroundColor: 'gray', justifyContent: 'space-around' }}
/>
<View style={styles.center}>
<Text>{t('text_home')}</Text>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
center: {
flex: 1,
backgroundColor: 'white',
justifyContent: "center",
alignItems: "center",
textAlign: "center",
},
container: {
flex: 1,
backgroundColor: 'white',
},
centerComponent: {
color: 'white',
fontWeight: 'bold',
fontSize: 20
},
});
export default Home;
Settings.js
import React, { useContext, useState } from "react";
import { View, StyleSheet, Text, StatusBar, Button } from "react-native";
import LocalizationContext from '../providers/LocalizationContext';
const Settings = () => {
const {t} = useContext(LocalizationContext);
const [locale, setLocale] = useState('en');
const toggleLanguage = (locale) => {
setLocale(locale);
console.log(locale);
};
return (
<View style={styles.center}>
<StatusBar barStyle="dark-content" backgroundColor='white' />
<View style={styles.center}>
<Text>{t('text_setings')}</Text>
<Button onPress={() => toggleLanguage(locale == "es" ? "en" : "es")} title={locale == "es" ? "EN" : "ES"} />
</View>
</View>
);
};
const styles = StyleSheet.create({
center: {
flex: 1,
backgroundColor: 'white',
justifyContent: "center",
alignItems: "center",
textAlign: "center",
},
});
export default Settings;

Answer 1

To allow changes in language display, you may use the following method (assuming that you want to display English , French and German) :
make a globals.js with the following (add more items if you need):
module.exports = {
eunit:["Eldery Unit", "Unité des personnes âgées", "Senioreneinheit"],
skeysearch:["Search by Name", "Recherche par nom", "Suche mit Name"],
sstatus: ["Status", "Statut", "Status"]
};
include the following line at the top of your js pages:
GLOBAL = require('./globals');
In the places where you want to display different language, use the following:
GLOBAL.skeysearch[this.state.lang]
change the lang state according to your needs. (say by clicking a button),
So ,
this.state.lang=0 for English
this.state.lang=1 for French
this.state.lang=2 for German