Package Exports

react-native-format-currency

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-format-currency) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

$ npm install react-native-format-currency

Usage

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" })

Returns:

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

Props

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

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!