React Native International
Flexible internalization of your React Native project with "format-message" library. By default, it uses the locale of the phone, but it is possible to change the language via the changeLocale method. The format-message library is used for the message format.
Demo
Install
Use npm:
npm i react-native-internationalUse yarn:
yarn add react-native-internationalUsage
The first step is to add language packs
Step 1. Create language packs
Make separate files for each language.
en.js
export default {
locale: 'en',
meta: { // Shown in method getLanguages
label: 'English',
},
translations: {
hello: 'Hello!',
hello_with_name: 'Hello {name}!',
},
}ru.js
export default {
locale: 'ru',
meta: { // Shown in method getLanguages
label: 'Русский язык',
},
translations: {
hello: 'Привет!',
hello_with_name: 'Привет {name}!',
},
}Step 2. Initialize languages
Open index.js and add languages initialization before app render.
import {AppRegistry} from 'react-native'
import {name as appName} from './app.json'
// Import initialization
import {initialization} from 'react-native-international'
// Add locales
initialization([
require('./en'),
require('./ru')
])
AppRegistry.registerComponent(appName, () => App)If you want to set default fallback language, you can use second argument
initialization([
require('./en'),
require('./ru')
], 'ru')Step 3. Use a hook
Use a webhook useIntl in a component that uses strings.
import React from 'react'
import {View, Text} from 'react-native'
import {useIntl} from 'react-native-international'
export default ({navigation}) => {
const {
t, // Instance format-message
} = useIntl()
return (
<View>
<Text>{t('hello')}</Text>
<Text>{t('hello_with_name', {name: 'Smith'})}</Text>
</View>
)
}Change language
There are several helper methods for comfortable working with languages.
const {
t, // Instance format-message
locale, // Current locale
getLanguages, // Method to get locales with "meta" property from language pack and "selected" flag.
changeLocale, // Method to change locale
} = useIntl()Property: locale
Return current locale.
console.log(locale)
// Return "en"Method: getLanguages
Get languages method return array.
const languages = getLanguages()
console.log(languages)
// [{
// locale: 'en',
// selected: true,
// label: 'English' // Meta from language pack
// }, {
// locale: 'ru',
// selected: false,
// label: 'Русский язык' // Meta from language pack
// }]Method: changeLocale
Will change the language. If suddenly the locale was not found, use the fallback locale or the last selected one.
changeLocale('ru')