CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-localize

A toolbox for your React Native app localization.

Pending
Overview
Eval results
Files

number-currency-formatting.mddocs/

Number and Currency Formatting

Access to device-specific number formatting preferences and regional currency information for proper localization of numeric data and monetary values.

Capabilities

Get Number Format Settings

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"

Get Device Currencies

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

docs

device-preferences.md

device-settings.md

index.md

language-matching.md

number-currency-formatting.md

platform-utilities.md

tile.json