Skip to content

Locales ​

The library uses native platform APIs for localization, ensuring accurate month names, day names, and formatting that respects device settings.

How It Works ​

JavaScript API
      ↓
C++ Cache (fast lookups)
      ↓
Native Platform APIs

When setLocale() is called, the library fetches all localized strings once from native APIs and caches them in C++. Subsequent formatting uses cached data with no bridge overhead.

Platform APIs ​

PlatformClasses
iOSNSLocale, NSDateFormatter
Androidjava.util.Locale, DateFormatSymbols

iOS uses NSDateFormatter symbols:

Android uses DateFormatSymbols:


Default Behavior ​

TIP

If setLocale() is never called, the library uses the device's default locale automatically.

typescript
import { getLocale, format } from '@bernagl/react-native-date';

getLocale();              // Device default, e.g., "en"
format(Date.now(), 'MMMM'); // Month in device's language

API ​

typescript
import {
  getLocale,
  setLocale,
  getAvailableLocales,
  getLocaleDisplayName,
  getLocaleInfo,
  getAvailableLocalesInfo
} from '@bernagl/react-native-date';
FunctionDescription
getLocale()Current locale code
setLocale(code)Set locale, returns true on success
getAvailableLocales()Object of available locales
getLocaleDisplayName(code)English name for locale
getLocaleInfo(code)Full locale details
getAvailableLocalesInfo()Array of all locale details

Setting a Locale ​

typescript
setLocale('es'); // Spanish
setLocale('fr'); // French
setLocale('ja'); // Japanese
setLocale('pt_BR'); // Portuguese (Brazil)

Performance

Set locale once at app startup. Each call refreshes the cache from native APIs.


Locale Info ​

typescript
type LocaleInfo = {
  code: string;         // "pt_BR"
  languageCode: string; // "pt"
  regionCode: string;   // "BR"
  displayName: string;  // "Portuguese (Brazil)"
  nativeName: string;   // "Português (Brasil)"
};
typescript
getLocaleInfo('es');
// { code: 'es', languageCode: 'es', displayName: 'Spanish', nativeName: 'Español' }

getLocaleDisplayName('ja'); // "Japanese"

Localized Tokens ​

Tokenenesja
MMMMNovembernoviembre11月
MMMNovnov11月
EEEESundaydomingo日曜日
EEESundom日
typescript
setLocale('es');
format(Date.now(), 'EEEE, d MMMM yyyy');
// "domingo, 30 noviembre 2025"

setLocale('ja');
format(Date.now(), 'yyyy年M月d日 EEEE');
// "2025年11月30日 日曜日"

Common Locales ​

CodeLanguage
enEnglish
esSpanish
frFrench
deGerman
itItalian
ptPortuguese
jaJapanese
zhChinese
koKorean
arArabic
ruRussian
hiHindi

Regional Variants ​

typescript
setLocale('en_US'); // English (United States)
setLocale('en_GB'); // English (United Kingdom)
setLocale('pt_BR'); // Portuguese (Brazil)
setLocale('zh_Hans'); // Chinese (Simplified)
setLocale('zh_Hant'); // Chinese (Traditional)

Locale Picker Example ​

typescript
import { getAvailableLocalesInfo, setLocale } from '@bernagl/react-native-date';

function LocalePicker() {
  const locales = getAvailableLocalesInfo();

  return (
    <FlatList
      data={locales}
      keyExtractor={(item) => item.code}
      renderItem={({ item }) => (
        <TouchableOpacity onPress={() => setLocale(item.code)}>
          <Text>{item.displayName}</Text>
          <Text>{item.nativeName}</Text>
        </TouchableOpacity>
      )}
    />
  );
}

Best Practices ​

  1. Set locale once at app startup
  2. Store user preference if app has language switcher
  3. Use getAvailableLocales() to verify support
  4. Test RTL locales (Arabic, Hebrew) if needed