React Native Publishing an Android App

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