Localizing app text with i18n-js To get the localized text onto the app, we need to call the i18n. t() function, and pass in the key we want to translate as a string. This gives us the value of the welcome key in our configuration object we imported based on the locale of the user's device.
There's no need for an external library. You can find what you're looking for in React's Native Modules
import { NativeModules } from 'react-native'
// iOS:
const locale = NativeModules.SettingsManager.settings.AppleLocale ||
NativeModules.SettingsManager.settings.AppleLanguages[0] // "fr_FR"
// Android:
const locale = NativeModules.I18nManager.localeIdentifier // "fr_FR"
To test this, I changed the language on my device to French. Here's a sample of what you'll find in the NativeModules.SettingsManager.settings
object related to locale:
{
...
AppleKeyboards: [
"fr_FR@hw=US;sw=QWERTY",
"en_US@sw=QWERTY;hw=Automatic",
"es_419@sw=QWERTY-Spanish;hw=Automatic",
"emoji@sw=Emoji"
]
AppleLanguages: ["fr-US", "en-US", "es-US", "en"]
AppleLanguagesDidMigrate: "9.2"
AppleLocale: "fr_FR"
NSLanguages: ["fr-US", "en-US", "es-US", "en"]
...
}
import { Platform, NativeModules } from 'react-native'
const deviceLanguage =
Platform.OS === 'ios'
? NativeModules.SettingsManager.settings.AppleLocale ||
NativeModules.SettingsManager.settings.AppleLanguages[0] //iOS 13
: NativeModules.I18nManager.localeIdentifier;
console.log(deviceLanguage); //en_US
I am using the i18n package (react-native-i18n). And then it's just:
I18n = require('react-native-i18n')
locale = I18n.currentLocale()
Nothing of the above worked for me, but this component.
console.log("Device Locale", DeviceInfo.getDeviceLocale()); // e.g en-US
function getLocale() {
if (React.Platform.OS === 'android') {
return I18n.locale;
} else {
return NativeModules.SettingsManager.settings.AppleLocale.replace(/_/, '-');
}
}
iOS 13 workaround here:
locale = NativeModules.SettingsManager.settings.AppleLocale // "fr_FR"
console.log(" ==> Current settings: ", NativeModules.SettingsManager.settings)
if (locale === undefined) {
// iOS 13 workaround, take first of AppleLanguages array
locale = NativeModules.SettingsManager.settings.AppleLanguages[0]
if (locale == undefined) {
return "en" // default language
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With