# react-native: Currency
URL: https://generaltranslation.com/en-GB/docs/react-native/api/components/currency.mdx
---
title: Currency
description: API reference for the Currency component
---

{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

The `<Currency>` component renders a numerical value as a currency.
The number is formatted according to the current locale and any optional parameters passed.
The currency component only handles formatting and does not perform any exchange rate calculations.

```jsx
<Currency>{100}</Currency>
// Output: $100.00
```

All reformatting is handled locally using the [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) library.


## Reference

### Props

<TypeTable
  type={{
  "children?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      description: 'Optional value. If not provided, children will be used as the value.',
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "currency?": {
      type: 'string',
      optional: true,
      default: '"USD"',
  },
  "options?": {
      type: 'Intl.NumberFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Description

| Prop       | Description                                                                                                                                                                                                                                                                           |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | The content to render inside the component. Typically a number representing the value to be formatted as a currency amount. If provided, it takes precedence over the `value` prop.                                                                                                   |
| `name`     | Optional name for the currency field, used for metadata purposes.                                                                                                                                                                                                                     |
| `value`    | The default value for the currency. Falls back to `children` if not provided. Can be a string or number. Strings are parsed into numbers before formatting.                                                                                                                           |
| `currency` | The currency type, such as &quot;USD&quot; or &quot;EUR&quot;. This determines the symbol and formatting used for the currency.                                                                                                                                                       |
| `options`  | Optional formatting options for the currency, following the [`Intl.NumberFormatOptions` specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). Use this to define styles such as maximum fraction digits, grouping, etc. |
| `locales`  | Optional locales to specify the formatting locale. If not provided, the user&#39;s default locale is used. Read more about specifying locales [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).                         |

### Returns

`JSX.Element` containing the formatted currency as a string.

***

## Examples

### Basic example

The `<Currency>` component can be used to display localised currency values.

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react-native'; // [!code highlight]

export default function PriceDisplay(item) {
    return (
        <Currency> {item.price} </Currency> // [!code highlight]
    );
}
```


### Specifying currency

Here we are displaying the price in euros.

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react-native';

export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> // [!code highlight]
  );
}
```


### Translating Currency components

If you want the currency to be displayed in a sentence that is also translated,
you can wrap the `<Currency>` component in a `<T>` component.

```jsx title="PriceDisplay.jsx" copy
import { T, Currency } from 'gt-react-native';

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice"> // [!code highlight]
      The price is <Currency> {item.price} </Currency>.
    </T> // [!code highlight]
  );
}
```


### Custom formatting

Here, we display the price in GBP, specifying the exact number of decimal places and using the narrow currency symbol (i.e. &quot;$100&quot; rather than &quot;US$100&quot;).
Read more about [Intl.NumberFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) for additional options.

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react-native';

export default function PriceDisplay(item) {
  return (
    <Currency
      currency="GBP"
      options={{ // [!code highlight]
        currencyDisplay: 'narrowSymbol', // [!code highlight]
        minimumFractionDigits: 2, // [!code highlight]
        maximumFractionDigits: 2, // [!code highlight]
      }} // [!code highlight]
    >
      {item.price}
    </Currency>
  );
}
```

***


## Notes

* The `<Currency>` component is used to format currency values based on the current locale and any optional parameters passed in.
* The currency component only handles formatting and does not perform any exchange rate calculations.
* The contents of the `<Currency>` component will not be sent to the API for translation.
  All reformatting is done locally using the [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) library.

## Next steps

* For more details and examples of how to use the `<Currency>` component and other variable components such as `<Num>`, `<DateTime>`, and `<Var>`, see the [Using Variable Components](/docs/react-native/guides/variables) documentation.