# react-native: Num
URL: https://generaltranslation.com/es/docs/react-native/api/components/num.mdx
---
title: Num
description: Referencia de la API del componente Num
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita la plantilla en content/docs-templates/. */}


## Descripción general

El componente `<Num>` muestra una cadena numérica con el formato de la configuración regional del usuario y se puede personalizar con opciones de formato.

```jsx
<Num>{100}</Num>
// Salida: 100
```

Todo el reformateo se realiza localmente con la biblioteca [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).


## Referencia

### Propiedades

<TypeTable
  type={{
  "children?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.NumberFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descripción

| Prop       | Descripción                                                                                                                                                                                                                                                                                                                                                |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | El contenido que se renderiza dentro del componente. Normalmente es un número, que se formatea según la locale actual y las opciones indicadas. Si se proporciona, tiene prioridad sobre la prop `value`.                                                                                                                                  |
| `name`     | Nombre opcional del campo numérico, usado con fines de metadatos.                                                                                                                                                                                                                                                                                          |
| `value`    | El valor predeterminado del número. Puede ser una cadena o un número. Las cadenas se conviierten en números antes de aplicar el formato.                                                                                                                                                                                                                    |
| `options`  | Opciones de formato opcionales para el número, según la especificación de [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). Úsalo para definir estilos como moneda, precisión decimal, etc.                                                                                |
| `locales`  | locales opcionales para especificar la locale de formato. Si no se proporcionan, se usa la locale predeterminada del usuario. Lee más sobre cómo especificar locales [aquí](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Devuelve

`JSX.Element` que contiene el número formateado como una cadena.

***

## Ejemplos

### Ejemplo básico

En este ejemplo, `item.quantity` se reformateará según la configuración regional del usuario.

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

export default function Inventory(item) {
  return (
    <Num> {item.quantity} </Num>  // [!code highlight]
  );
}
```


### Especificar locales

De forma predeterminada, los locales se determina según la configuración del navegador del usuario,
pero puedes establecer explícitamente los locales del componente `<Num>`.

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

export default function CountDisplay(item) {
  return (
    <Num locales={['fr-FR']}> {item.count} </Num> // [!code highlight]
  );
}
```


### Traducir componentes Num

Supongamos que quieres que tu número forme parte de una frase más larga que se traduzca.
Solo añade los componentes `<T>` alrededor del contenido.

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

export default function DynamicPriceDisplay(item) {
  return (
    <T id="price">
      There are <Num> {item.count} </Num> units available. // [!code highlight]
    </T>
  );
}
```


### Formato personalizado

`<Num>` usa la biblioteca [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) para dar formato.

```jsx
import { Num } from 'gt-react-native';

export default function CustomFormat(number) {
  return (
    <Num
      options={{ style: "decimal", maximumFractionDigits: 2 }}
    >
      {number}
    </Num>
  );
}
```

***


## Notas

* El componente `<Num>` se usa para formatear números según la configuración regional del usuario.
* Cuando esté dentro de un componente `<T>`, asegúrate de envolver todos los números dinámicos en un componente `<Num>`.

## Próximos pasos

* Para obtener más información y ejemplos de uso del componente `<Num>` y de otros componentes de variable como `<Currency>`, `<DateTime>` y `<Var>`, consulta la documentación [Uso de componentes de variable](/docs/react-native/guides/variables).