Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the best way to get device locale in react native (iOS)?

Tags:

react-native

People also ask

How do you localize in react-native?

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
    }
}