A Comprehensive Guide to Currency Number Formatting in React Native Expo

In React Native Expo development, formatting numbers is a common requirement, especially for displaying financial data, such as converting numbers like 10000 to a currency format like $10,000.00. This guide details various formatting methods based on best practices for a comprehensive solution.

Fundamentals of Currency Formatting

Number formatting typically involves adding thousand separators (e.g., commas), decimal points, and currency symbols. In React Native Expo environments, developers often face challenges, such as standard JavaScript methods like String.format being incompatible and causing errors.

Method 1: Custom Function with Regular Expressions

A simple approach is to combine toFixed with regular expressions. For example, define a function to handle number formatting:

function currencyFormat(num) {
   return '$' + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}
console.log(currencyFormat(2665)); // outputs $2,665.00

This method works for basic needs but requires manual handling of separators and symbols, and may not support multiple locales.

Method 2: Integrating the react-number-format Library

It is recommended to use the react-number-format library, which provides rich number formatting features for React Native. First, install the library:

npm install react-number-format

Then, use the NumericFormat component in your components:

<NumericFormat value={2456981.toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'$'} />

This outputs $2,456,981.00, automatically handling thousand separators and currency prefixes. The library supports custom formats, masking, and input control.

Method 3: Leveraging the Intl.NumberFormat Standard API

Another standard method is using Intl.NumberFormat, but note that full support in React Native may be limited. Example code:

const numberFormat = (value) =>
  new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  }).format(value);
console.log(numberFormat(50000)); // outputs $50,000.00

This method offers localization support but may require additional configuration for Expo environments.

Integrating expo-localization for Localization

To enhance formatting adaptability, integrate expo-localization to fetch user locale settings. Install it:

npx expo install expo-localization

Then use its API to retrieve locale information:

import { getLocales } from 'expo-localization';
const locales = getLocales();
const locale = locales[0];
const decimalSeparator = locale.decimalSeparator || '.';
const digitGroupingSeparator = locale.digitGroupingSeparator || ',';
// Apply separators to formatting logic, e.g., in combination with react-number-format

This ensures that formatting symbols adapt to user preferences, such as different thousand separators across regions.

Best Practices and Conclusion

In React Native Expo projects, it is advised to prioritize react-number-format due to its comprehensive features and easy integration. Combining it with expo-localization enables automatic adaptation to multiple locales. Test across different devices and regions for consistency, and consider performance impacts. For simple scenarios, custom functions suffice; for complex needs, libraries are recommended.