Skip to content

How to change language of my app in run time when user selects the language.

In today’s applications, multilingual support is necessary because your application will support languages for many people from many different countries.

A mini example How to support and change your language from dropdown List language .

Image for post

With Library ?

What’s library will use for the multiple language Application

import I18n from ‘i18n-js’;

import memoize from ‘lodash.memoize’; // Use for caching/memoize for better performance

I suggestion to use i18n-js for muti languages.

I’ll create array my language with that i’ll support in my Application.

const listLanguage = [
{key:’en’, label:’🏴󠁧󠁢󠁥󠁮󠁧󠁿’}, {key:’vi’, label:’🇻🇳’} ,{label: ‘🇳🇱’, key:’nl’}, {label:’🇨🇳’, key:’zh’}, {label:’🇰🇷’, key:’ko’}
]
</pre

I also create the folder to contain my languages , for example :

You have a button , a text with contain , or introduction … with that’s will different for each Devices Language or User Language .

Image for post

I have en.js to support Vietnames, ko.js to support Korean, nl.js to support Dutch , zh.js to support chinese …

 

And in my index.js , i’ll coding for progressing change and init language with code :

import * as RNLocalize from ‘react-native-localize’;
import I18n from ‘i18n-js’;
import memoize from ‘lodash.memoize’; // Use for caching/memoize for better performance
import en from ‘./en’;
import zh from ‘./zh’;
import vn from ‘./vn’;
import vi from ‘./vi’;
import ko from ‘./ko’;
import nl from ‘./nl’;
const locales = RNLocalize.getLocales();
if (Array.isArray(locales)) {
I18n.locale = locales[0].languageTag;
}
I18n.translations = {
default: en,
‘en-US’: en,
en,
vi,
nl,
‘nl-NL’: nl,
zh,
‘vi-VN’: vi,
ko,
};
I18n.fallbacks = true;
export default I18n;

How to change language of App from my Component ?

Here is my function to change language with code , for each change language i’ll change locate with I18n I18n.locale = languageSelected

onChangeLanguage(languageSelected){
this.setState({
languageSelected
})
//this.props.setLanguageUser(value)
I18n.locale = languageSelected
// _storeData(USER_LANGUAGE,value);
}

Creating dropdown list language

Create dropdown list to show the option to change language.

class DropdownLanguage extends React.Component {
constructor(props) {
super(props)
}
render() {
return (<View style={styles.dropdownLanguage}>
<Text style={{width:70,}}>{I18n.t(‘hompage.language’)}: </Text>
<Picker
mode=”dropdown” iosHeader={‘’} style={{ width: undefined,height:40,}}
selectedValue={this.props.language} onValueChange={this.props.onChangeLanguage.bind(this)}
>
{listLanguage.map((languageItem, i) => {
return <Picker.Item key={i} value={languageItem.key} label={languageItem.label} />
})}</Picker></View>
)}}

How can i restart app when i change language ? Because i need to restart the Data that called from API ? And how to update to new language when user changed .

First you must save new option picked by user into caching of application .

await AsyncStorage.setItem(‘USER_LANGUAGE_PICKED’, languageCode);

and then get it’s when app launch at First screen :

const languageCode = await AsyncStorage.getItem(‘USER_LANGUAGE_PICKED’);

then set Language to I18n

I18n.locale = languageCode

Import RNRestart

Call RNRestart.Restart() to restart Application.

— — — — — — — — — — — — — –

That’s all .

Here is a code demo , enjoy …

https://snack.expo.io/@tungtranuit/reactnative—multiple-languages–switch-language-

— — — — — — — — —

With other language you can also create file with file name like this

Supported languages (ISO 639–1)

  • ar: Arabic
  • az: Azerbaijani
  • be: Belorussian
  • bg: Bulgarian
  • bs: Bosnian
  • ca: Catalan
  • cs: Czech
  • da: Danish
  • de: German
  • en: English
  • es: Spanish
  • et: Estonian
  • fa: Persian
  • fi: Finnish
  • fr: French
  • el: Greek
  • he: Hebrew
  • hr: Croatian
  • hu: Hungarian
  • hy: Armenian
  • it: Italian
  • id: Indonesian
  • ja: Japanese
  • ka: Georgian
  • kk: Kazakh
  • ko: Korean
  • ky: Kyrgyz
  • lt: Lithuanian
  • lv: Latvian
  • mk: Macedonian
  • mn: Mongolian
  • nb: Norwegian Bokmål
  • nl: Dutch
  • nn: Norwegian Nynorsk
  • pl: Polish
  • pt: Portuguese
  • ro: Romanian
  • ru: Russian
  • sk: Slovak
  • sl: Slovene
  • sr: Serbian
  • sv: Swedish
  • th: Thai
  • tr: Turkish
  • uk: Ukrainian
  • ur: Urdu
  • uz: Uzbek
  • zh: Chinese
  • vi: Vietnamese
Tags: