Skip to main content
The formatters module provides utility functions for formatting numerical values, particularly for displaying cryptocurrency prices in a user-friendly format.

​
formatToUSD

Formats a number as US Dollar currency with proper locale formatting.
src/utils/formatters.ts
export const formatToUSD = (value: number): string => {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  }).format(value);
};

​
Parameters

​
value
number
required
The numeric value to format as USD currency

​
Returns

​
return
string
The formatted currency string with dollar sign, thousands separators, and two decimal places.Example: "$45,678.90"

​
Usage Examples

​
Basic Usage

import { formatToUSD } from '@/src/utils/formatters';

const price = 45678.9;
const formatted = formatToUSD(price);
console.log(formatted); // "$45,678.90"

​
In Components

Used in CryptoCard component to display prices:
src/components/CryptoCard.tsx
import { formatToUSD } from '../utils/formatters';

const CryptoCard = ({ crypto }: Props) => {
  const price = parseFloat(crypto.price_usd || '0');
  
  return (
    <View style={styles.bottomRow}>
      <Text style={styles.price}>{formatToUSD(price)}</Text>
    </View>
  );
};
Used in CryptoDetailScreen for various price fields:
src/screens/CryptoDetailScreen.tsx
import { formatToUSD } from '../utils/formatters';

const CryptoDetailScreen = ({ id }: { id: string }) => {
  return (
    <View>
      <Text>Precio (USD): {formatToUSD(Number(cryptoDetails.price_usd))}</Text>
      <Text>Market Cap: {formatToUSD(Number(cryptoDetails.market_cap_usd))}</Text>
      <Text>Circulating Supply: {formatToUSD(Number(cryptoDetails.csupply))}</Text>
    </View>
  );
};

​
Handling Edge Cases

// Small values
formatToUSD(0.01);     // "$0.01"

// Large values with thousands separators
formatToUSD(1234567.89); // "$1,234,567.89"

// Zero value
formatToUSD(0);        // "$0.00"

// Negative values (though uncommon for crypto prices)
formatToUSD(-100);     // "-$100.00"

​
Formatting Behavior

The formatToUSD function uses the Intl.NumberFormat API with the following configuration:
Uses US English number formatting conventions with commas as thousands separators and periods as decimal separators.
Formats the number as a currency value, automatically adding the currency symbol.
Uses the US Dollar currency symbol ($) and formatting rules.
Automatically formats to 2 decimal places, which is standard for USD currency.

​
Type Safety

Always ensure the input value is a valid number. When working with string values from the API (like price_usd), parse them first using parseFloat() or Number().
// ✅ Good: Parse string values first
const price = parseFloat(crypto.price_usd || '0');
formatToUSD(price);

// ❌ Bad: Passing string directly will cause type error
formatToUSD(crypto.price_usd); // Type error

​
Alternative Formatting

If you need different currency formatting, you can modify the locale or currency: 
// Euro formatting
const formatToEUR = (value: number): string => {
  return new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR',
  }).format(value);
};

// British Pound
const formatToGBP = (value: number): string => {
  return new Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
  }).format(value);
};

​
Performance Considerations

The Intl.NumberFormat API is performant for most use cases. If you’re formatting thousands of values in a tight loop, consider creating a single formatter instance and reusing it.
// For high-performance scenarios
const usdFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

// Reuse the formatter
prices.map(price => usdFormatter.format(price));

CryptoCard Component

Component that uses formatToUSD for price display

Crypto Details

Detail screen using formatToUSD for multiple fields

Build docs developers (and LLMs) love

Get started for freeTalk to us