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

1$ yarn add react-native-format-currency

or

1$ npm install react-native-format-currency

Usage

Import library with

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

Methods

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

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

Formats a currency amount to specified currency code:

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

Props

Prop	Type	Default	Note
amount	Number	null	currency amount
code	String	null	3-letter ISO 4217 Currency Code

Returns:

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

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

getSupportedCurrencies()

getSupportedCurrencies()

Returns an array of currencies:

1[
2  { code: "ARS", name: "Argentina Peso" },
3  { code: "AUD", name: "Australia Dollar" },
4  { code: "BGN", name: "Bulgaria Lev" },
5  { code: "BRL", name: "Brazil Real" },
6  { code: "CAD", name: "Canada Dollar" },
7  { code: "CHF", name: "Switzerland Franc" },
8  { code: "CLP", name: "Chile Peso" },
9  { code: "CNY", name: "China Yuan Renminbi" },
10  { code: "COP", name: "Colombia Peso" },
11  { code: "CZK", name: "Czech Republic Koruna" },
12  { code: "DKK", name: "Denmark Krone" },
13  { code: "EUR", name: "Euro Member Countries" },
14  { code: "GBP", name: "United Kingdom Pound" },
15  { code: "HKD", name: "Hong Kong Dollar" },
16    ...
17]

Example

Check out the example app for a working demo.

1import { StatusBar } from "expo-status-bar";
2import React, { useState } from "react";
3import {
4  FlatList,
5  SafeAreaView,
6  StyleSheet,
7  Text,
8  TextInput,
9  View,
10} from "react-native";
11import {
12  formatCurrency,
13  getSupportedCurrencies,
14} from "react-native-format-currency";
15
16export default function App() {
17  const [inputValue, setInputValue] = useState("1234.56");
18
19  // get all of the supported currency codes
20  const currencyCodes = getSupportedCurrencies();
21
22  // loop through each currency code and show formatted value
23  const renderItem = ({ item }) => {
24    const [valueFormattedWithSymbol, valueFormattedWithoutSymbol, symbol] =
25      formatCurrency({ amount: Number(inputValue), code: item.code });
26
27    return (
28      <View style={styles.currencyRow}>
29        <Text style={styles.currencyRowText}>
30          {item.code} {symbol}
31        </Text>
32        <Text style={styles.currencyRowText}>{item.name}</Text>
33        <Text style={styles.currencyRowText}>{valueFormattedWithSymbol}</Text>
34      </View>
35    );
36  };
37
38  return (
39    <SafeAreaView style={styles.container}>
40      <View style={styles.inputContainer}>
41        <TextInput
42          style={styles.input}
43          textAlign="center"
44          value={inputValue}
45          onChangeText={(value) => setInputValue(value)}
46          keyboardType="decimal-pad"
47        />
48      </View>
49
50      <FlatList
51        style={styles.scrollView}
52        data={currencyCodes}
53        renderItem={renderItem}
54        keyExtractor={(code) => code.code}
55      />
56      <StatusBar style="auto" />
57    </SafeAreaView>
58  );
59}
60
61const styles = StyleSheet.create({
62  container: {
63    flex: 1,
64    backgroundColor: "#fff",
65    alignItems: "flex-start",
66  },
67  inputContainer: {
68    flex: 1,
69    alignSelf: "stretch",
70    marginTop: 10,
71    marginBottom: 15,
72  },
73  input: {
74    backgroundColor: "#eee",
75    height: 38,
76    fontSize: 30,
77    fontWeight: "bold",
78  },
79  scrollView: {
80    width: "100%",
81    paddingHorizontal: 5,
82    marginTop: 40,
83    marginBottom: 40,
84  },
85  currencyRow: {
86    flex: 1,
87    flexDirection: "row",
88    justifyContent: "space-between",
89  },
90  currencyRowText: {
91    alignContent: "flex-start",
92    color: "#000",
93    fontSize: 16,
94  },
95});

Testing

1yarn build
2yarn test

Contribute

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