CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-localize

A toolbox for your React Native app localization.

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

React Native Localize

React Native Localize is a comprehensive toolbox for React Native app localization, providing access to device-specific regional settings including preferred locales, currencies, number formatting, calendar systems, temperature units, timezones, and measurement systems. It offers cross-platform support for Android, iOS, macOS, and Web with automatic language detection, RTL text support, and intelligent language tag matching.

Package Information

  • Package Name: react-native-localize
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-native-localize

Core Imports

import {
  getLocales,
  getCountry,
  getCurrencies,
  findBestLanguageTag,
  getNumberFormatSettings,
  getCalendar,
  getTemperatureUnit,
  getTimeZone,
  uses24HourClock,
  usesMetricSystem,
  usesAutoDateAndTime,
  usesAutoTimeZone,
  openAppLanguageSettings,
  type Locale,
  type Calendar,
  type TemperatureUnit,
  type NumberFormatSettings
} from "react-native-localize";

For CommonJS:

const {
  getLocales,
  getCountry,
  getCurrencies,
  findBestLanguageTag
} = require("react-native-localize");

Basic Usage

import { getLocales, findBestLanguageTag, getNumberFormatSettings } from "react-native-localize";

// Get device locales
const locales = getLocales();
console.log(locales[0]); // { languageCode: "en", countryCode: "US", languageTag: "en-US", isRTL: false }

// Find best matching language
const bestLanguage = findBestLanguageTag(["en-US", "fr-FR", "es-ES"]);
console.log(bestLanguage); // { languageTag: "en-US", isRTL: false }

// Get number formatting
const numberFormat = getNumberFormatSettings();
console.log(numberFormat); // { decimalSeparator: ".", groupingSeparator: "," }

Architecture

React Native Localize is built around several key components:

  • Native Bridge: TurboModule interface connecting JavaScript to native platform APIs
  • Web Implementation: Browser-based implementation using Intl and Navigator APIs for web compatibility
  • Type System: Complete TypeScript definitions for all APIs and data structures
  • Platform Detection: Automatic platform-specific behavior for iOS, Android, macOS, and Web
  • Mock System: Testing utilities with configurable mock implementations
  • Expo Integration: Plugin for configuring supported locales in Expo managed workflow

Capabilities

Device Settings

Core functionality for accessing device regional settings including locales, country, timezone, and calendar information.

function getLocales(): Locale[];
function getCountry(): string;
function getTimeZone(): string;
function getCalendar(): Calendar;

Device Settings

Language Matching

Intelligent language tag matching to find the best supported language from your app's available translations.

function findBestLanguageTag<T extends string>(
  languageTags: ReadonlyArray<T>
): { languageTag: T; isRTL: boolean } | undefined;

Language Matching

Number and Currency Formatting

Access to device-specific number formatting preferences and regional currency information.

function getNumberFormatSettings(): NumberFormatSettings;
function getCurrencies(): string[];

interface NumberFormatSettings {
  decimalSeparator: string;
  groupingSeparator: string;
}

Number and Currency Formatting

Device Preferences

System preferences for measurement units, time format, and automatic settings.

function getTemperatureUnit(): TemperatureUnit;
function uses24HourClock(): boolean;
function usesMetricSystem(): boolean;
function usesAutoDateAndTime(): boolean | undefined;
function usesAutoTimeZone(): boolean | undefined;

Device Preferences

Platform Utilities

Platform-specific functionality including settings access and testing utilities.

function openAppLanguageSettings(): Promise<void>;

Platform Utilities

Types

interface Locale {
  languageCode: string;
  scriptCode?: string;
  countryCode: string;
  languageTag: string;
  isRTL: boolean;
}

interface NumberFormatSettings {
  decimalSeparator: string;
  groupingSeparator: string;
}

type TemperatureUnit = "celsius" | "fahrenheit";

type Calendar =
  | "gregorian"
  | "buddhist"
  | "coptic"
  | "ethiopic"
  | "ethiopic-amete-alem"
  | "hebrew"
  | "indian"
  | "islamic"
  | "islamic-umm-al-qura"
  | "islamic-civil"
  | "islamic-tabular"
  | "iso8601"
  | "japanese"
  | "persian";
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-native-localize@3.5.x
Publish Source
CLI
Badge
tessl/npm-react-native-localize badge