Something similar to [NSLocale currentLocale] in Objective-C.
There's no need for an external library. You can find when you're looking for in React's Native Modules
import { NativeModules } from 'react-native'
// iOS:
const locale = NativeModules.SettingsManager.settings.AppleLocale // "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"]
...
}
-
1
-
1@DanielSteigerwald Accessing settings in this way is not yet supported on Android. See Settings.android.js – evan_schmevan Sep 12 '16 at 17:22
-
6
-
@evan_schmevan In ios NativeModules.SettingsManager is undefined and NativeModules is an empty object... :( ! Do you know what can be the reason? – Aral Roca Dec 15 '18 at 14:05
-
1@AralRoca are you using Expo by chance? It looks like it's an empty object when testing on Expo, but everything works as expected on an iOS simulator and real device. – evan_schmevan Dec 21 '18 at 16:40
I am using the i18n package (react-native-i18n). And then it's just:
I18n = require('react-native-i18n')
locale = I18n.currentLocale()
Below function will return a 2 letter language code. Eg: en
function getLanguageCode() {
let systemLanguage = 'en';
if (Platform.OS === 'android') {
systemLanguage = NativeModules.I18nManager.localeIdentifier;
} else {
systemLanguage = NativeModules.SettingsManager.settings.AppleLocale;
}
const languageCode = systemLanguage.substring(0, 2);
return languageCode;
}
function getLocale() {
if (React.Platform.OS === 'android') {
return I18n.locale;
} else {
return NativeModules.SettingsManager.settings.AppleLocale.replace(/_/, '-');
}
}
Nothing of the above worked for me, but this component.
console.log("Device Locale", DeviceInfo.getDeviceLocale()); // e.g en-US
-
Very nice package, but currently not maintained anymore - the author is looking for someone to take over (at the time I'm posting this). Fingers crossed somebody will pick it up. – Philipp Sumi Jan 13 at 15:50
You may need to extend react native yourself to get this info. But, depending on your use case, this localization component (stefalda/ReactNativeLocalization) may work for you.
I found this solution for Android and iOS (RN 0.35)
import React, {NativeModules} from 'react-native';
if (NativeModules.I18nManager) {
const {localeIdentifier, isRTL} = NativeModules.I18nManager;
}
May be this will help to someone, but iOS not shows locale property. It shows only rtl support now.
if you develop over Expo... you can use:
console.log(await NativeModules.ExponentUtil.getCurrentLocaleAsync());
console.log(await NativeModules.ExponentUtil.getCurrentDeviceCountryAsync());
console.log(await NativeModules.ExponentUtil.getCurrentTimeZoneAsync());
NativeModules solution can be changed over time by Facebook developers.
Because of this reason I had prepared a component. (It works only on Android for now)
Sample usage:
import SystemSettings from 'react-native-system-settings'
SystemSettings.get(
settings => console.log('settings: ', settings)
)
Also promise-then can be used:
SystemSettings.get().then(settings => console.log('settings: ', settings)).done()
Also ES7 async-await method can be used!
class App extends React.Component {
componentWillMount() {
this._loadInitialState()
}
_loadInitialState = async () => {
try {
let settings = await SystemSettings.get()
// Now settings variable would be filled and can be used!
} catch (error) {}
};
}
A sample result:
{
densityDpi: 320,
fontScale: 1,
hardKeyboardHidden: "no",
keyboard: "qwerty",
keyboardHidden: "no",
localization: {
country: "US",
displayCountry: "United States",
displayLanguage: "English",
displayName: "English (United States)",
is24HourFormat: false,
language: "en",
locale: "en_US",
networkCountry: "US",
simCountry: "US",
timeZone: {
ID: "Europe/Amsterdam",
displayName: {
long: "Amsterdam Standard Time",
short: "GMT+01:00",
},
offset: 3600000
}
},
orientation: "portrait",
screenHeightDp: 615,
screenLayout: "normal",
screenWidthDp: 360,
smallestScreenWidthDp: 360,
uiModeType: "normal"
}
Personally I prefer use react-native-i18n. then you can use like this inside the documentation..
import { getLanguages } from 'react-native-i18n'
getLanguages().then(languages => {
console.log(languages) // ['en-US', 'en']
})
I am using react-native-i18n
in order to access the device's language I used:
import { getLanguages } from 'react-native-i18n';
getLanguages().then(languages => {
console.log(languages); // ['en-US', 'en']
});
It's all in the documentation.
You can install react-native-i18n
and use this function:
import React, { NativeModules } from 'react-native'
...
function getLocale () {
if (React.Platform.OS === 'android') {
return NativeModules.RNI18n.getCurrentLocale(locale => locale.replace(/_/, '-'))
} else {
return NativeModules.RNI18n.locale.replace(/_/, '-')
}
}
Works both under Android and iOS.
-
NativeModules
does not haveRNI18n
(at least by default). I guess you added a lib. – antoine129 Apr 30 '16 at 1:22 -
-