A toolbox for your React Native app localization.
—
Access to device-specific number formatting preferences and regional currency information for proper localization of numeric data and monetary values.
Retrieves the device's number formatting preferences, including decimal and grouping separators.
/**
* Get device's number formatting settings
* @returns Object containing decimal and grouping separators
*/
function getNumberFormatSettings(): NumberFormatSettings;
interface NumberFormatSettings {
/** Character used for decimal separation (e.g., ".", ",") */
decimalSeparator: string;
/** Character used for thousands grouping (e.g., ",", ".", " ") */
groupingSeparator: string;
}Usage Examples:
import { getNumberFormatSettings } from "react-native-localize";
const formatSettings = getNumberFormatSettings();
console.log(formatSettings);
// US: { decimalSeparator: ".", groupingSeparator: "," }
// DE: { decimalSeparator: ",", groupingSeparator: "." }
// FR: { decimalSeparator: ",", groupingSeparator: " " }
// Format numbers according to device preferences
function formatNumber(value: number): string {
const { decimalSeparator, groupingSeparator } = getNumberFormatSettings();
// Use native toLocaleString for proper formatting
return value.toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
}
console.log(formatNumber(1234.56));
// US: "1,234.56"
// DE: "1.234,56"
// FR: "1 234,56"Custom Number Formatting:
import { getNumberFormatSettings } from "react-native-localize";
function formatCurrency(amount: number, currencyCode: string): string {
const { decimalSeparator, groupingSeparator } = getNumberFormatSettings();
// Manual formatting using device separators
const parts = Math.abs(amount).toFixed(2).split('.');
const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, groupingSeparator);
const decimalPart = parts[1];
const formatted = `${integerPart}${decimalSeparator}${decimalPart}`;
const sign = amount < 0 ? '-' : '';
return `${sign}${currencyCode} ${formatted}`;
}
console.log(formatCurrency(1234.56, "USD"));
// US: "USD 1,234.56"
// DE: "USD 1.234,56"Gets an array of currencies associated with the device's locale preferences.
/**
* Get currencies associated with device locales
* @returns Array of ISO currency codes (e.g., ["USD", "EUR"])
*/
function getCurrencies(): string[];Usage Examples:
import { getCurrencies, getCountry } from "react-native-localize";
const currencies = getCurrencies();
console.log(currencies); // ["USD", "EUR"]
// Get primary currency
const primaryCurrency = currencies[0];
console.log(primaryCurrency); // "USD"
// Use for currency selection
function getDefaultCurrency(): string {
const currencies = getCurrencies();
return currencies[0] || "USD"; // fallback to USD
}
// Currency-aware price formatting
function formatPrice(amount: number): string {
const currency = getDefaultCurrency();
return new Intl.NumberFormat(undefined, {
style: 'currency',
currency: currency
}).format(amount);
}
console.log(formatPrice(29.99));
// US: "$29.99"
// EU: "29,99 €"
// UK: "£29.99"Multi-Currency Support:
import { getCurrencies, getCountry } from "react-native-localize";
// App with multi-currency support
function getSupportedCurrencies(): string[] {
const deviceCurrencies = getCurrencies();
const appSupportedCurrencies = ["USD", "EUR", "GBP", "JPY", "CAD"];
// Find intersection of device and app currencies
return deviceCurrencies.filter(currency =>
appSupportedCurrencies.includes(currency)
);
}
// Currency selection with fallback
function selectBestCurrency(): string {
const supported = getSupportedCurrencies();
if (supported.length > 0) {
return supported[0];
}
// Fallback based on country
const country = getCountry();
const countryToCurrency = {
"US": "USD",
"GB": "GBP",
"JP": "JPY",
"CA": "CAD"
};
return countryToCurrency[country] || "USD";
}E-commerce Integration:
import { getCurrencies, getNumberFormatSettings } from "react-native-localize";
class PriceFormatter {
private currency: string;
private formatSettings: NumberFormatSettings;
constructor() {
this.currency = getCurrencies()[0] || "USD";
this.formatSettings = getNumberFormatSettings();
}
formatPrice(amount: number, showCurrency: boolean = true): string {
const formatted = new Intl.NumberFormat(undefined, {
style: showCurrency ? 'currency' : 'decimal',
currency: this.currency,
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(amount);
return formatted;
}
formatDiscount(original: number, discounted: number): string {
const savings = original - discounted;
const percentage = Math.round((savings / original) * 100);
return `Save ${this.formatPrice(savings)} (${percentage}%)`;
}
}
const formatter = new PriceFormatter();
console.log(formatter.formatPrice(99.99)); // "$99.99" or "99,99 €"
console.log(formatter.formatDiscount(99.99, 79.99)); // "Save $20.00 (20%)"Install with Tessl CLI
npx tessl i tessl/npm-react-native-localize