react-native-format-currency

A lightweight international currency formatter for React Native & Expo (iOS and Android). Check out the example app for a working demo.

Installation

$ yarn add react-native-format-currency

or

$ npm install react-native-format-currency

Usage

Import library with

import { formatCurrency, getSupportedCurrencies } from "react-native-format-currency";

Methods

formatCurrency({ amount: _number_, code: _string_})

formatCurrency({ amount: 1234.56, code: "ARS" })

Formats a currency amount to specified currency code:

const [valueFormattedWithSymbol, valueFormattedWithoutSymbol, symbol] = formatCurrency({ amount: 1234.56, code: "ARS" })

Props

Returns:

Array containing formatted currency string, formatted currency (without symbol), and currency symbol

["$ 1.234,56", "1.234,56", "$"]

getSupportedCurrencies()

getSupportedCurrencies()

Returns an array of currencies:

[
  { code: "ARS", name: "Argentina Peso" },
  { code: "AUD", name: "Australia Dollar" },
  { code: "BGN", name: "Bulgaria Lev" },
  { code: "BRL", name: "Brazil Real" },
  { code: "CAD", name: "Canada Dollar" },
  { code: "CHF", name: "Switzerland Franc" },
  { code: "CLP", name: "Chile Peso" },
  { code: "CNY", name: "China Yuan Renminbi" },
  { code: "COP", name: "Colombia Peso" },
  { code: "CZK", name: "Czech Republic Koruna" },
  { code: "DKK", name: "Denmark Krone" },
  { code: "EUR", name: "Euro Member Countries" },
  { code: "GBP", name: "United Kingdom Pound" },
  { code: "HKD", name: "Hong Kong Dollar" },
    ...
]

Example

Check out the example app for a working demo.

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
  FlatList,
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from "react-native";
import {
  formatCurrency,
  getSupportedCurrencies,
} from "react-native-format-currency";

export default function App() {
  const [inputValue, setInputValue] = useState("1234.56");

  // get all of the supported currency codes
  const currencyCodes = getSupportedCurrencies();

  // loop through each currency code and show formatted value
  const renderItem = ({ item }) => {
    const [valueFormattedWithSymbol, valueFormattedWithoutSymbol, symbol] =
      formatCurrency({ amount: Number(inputValue), code: item.code });

    return (
      <View style={styles.currencyRow}>
        <Text style={styles.currencyRowText}>
          {item.code} {symbol}
        </Text>
        <Text style={styles.currencyRowText}>{item.name}</Text>
        <Text style={styles.currencyRowText}>{valueFormattedWithSymbol}</Text>
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          textAlign="center"
          value={inputValue}
          onChangeText={(value) => setInputValue(value)}
          keyboardType="decimal-pad"
        />
      </View>

      <FlatList
        style={styles.scrollView}
        data={currencyCodes}
        renderItem={renderItem}
        keyExtractor={(code) => code.code}
      />
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "flex-start",
  },
  inputContainer: {
    flex: 1,
    alignSelf: "stretch",
    marginTop: 10,
    marginBottom: 15,
  },
  input: {
    backgroundColor: "#eee",
    height: 38,
    fontSize: 30,
    fontWeight: "bold",
  },
  scrollView: {
    width: "100%",
    paddingHorizontal: 5,
    marginTop: 40,
    marginBottom: 40,
  },
  currencyRow: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  currencyRowText: {
    alignContent: "flex-start",
    color: "#000",
    fontSize: 16,
  },
});

Testing

yarn build
yarn test

Contribute

Feel free to submit a PR if you'd like to help!