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

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. Edita el template en content/docs-templates/. */}


## Descripción general

El componente `<RelativeTime>` renderiza una cadena de tiempo relativo localizada, como &quot;hace 2 horas&quot; o &quot;en 3 días&quot;.
Admite dos modos de uso: seleccionar automáticamente la unidad más adecuada a partir de un `Date`, o especificar explícitamente un valor y una unidad.

```jsx
<RelativeTime>{someDate}</RelativeTime>
// Salida: "hace 2 horas"
```

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

<Callout type="warn">
  `<RelativeTime>` puede causar **errores de hidratación de React** en aplicaciones renderizadas en el servidor. Consulta [Cómo evitar los errores de hidratación](#avoiding-hydration-errors) más abajo.
</Callout>

## Referencia

### Props

<TypeTable
  type={{
  "children?": {
      description: 'Un objeto Date a partir del cual calcular el tiempo relativo.',
      type: 'Date',
      optional: true,
      default: 'undefined',
  },
  "date?": {
      description: 'Un objeto Date a partir del cual calcular el tiempo relativo. Tiene prioridad sobre contenido.',
      type: 'Date',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      description: 'Valor numérico explícito para el tiempo relativo. Requiere unit.',
      type: 'number',
      optional: true,
      default: 'undefined',
  },
  "unit?": {
      description: 'La unidad de tiempo. Es obligatoria cuando se usa value.',
      type: 'Intl.RelativeTimeFormatUnit',
      optional: true,
      default: 'undefined',
  },
  "baseDate?": {
      description: 'Fecha base para calcular el tiempo relativo. El valor predeterminado es new Date() en el momento de renderizar.',
      type: 'Date',
      optional: true,
      default: 'new Date()',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.RelativeTimeFormatOptions',
      optional: true,
      default: "{ numeric: 'auto', style: 'long' }",
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descripción

| Nombre de la propiedad | Descripción                                                                                                                                                                                                                                                                                                                                  |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`             | Un objeto `Date`. El componente selecciona automáticamente la unidad más adecuada (segundos, minutos, horas, días, semanas, meses o años) y formatea el tiempo en relación con `baseDate`.                                                                                                                                                   |
| `date`                 | Un objeto `Date` a partir del cual calcular el tiempo relativo. Si se proporcionan `date` y `contenido`, `date` tiene prioridad.                                                                                                                                                                                                              |
| `value`                | Un valor numérico explícito para el tiempo relativo (por ejemplo, `-1` para &quot;ayer&quot;). Debe usarse junto con `unit`.                                                                                                                                                                                                                 |
| `unit`                 | La unidad de tiempo (por ejemplo, `'second'`, `'minute'`, `'hour'`, `'day'`, `'week'`, `'month'`, `'year'`). Es obligatoria al usar `value`.                                                                                                                                                                                                 |
| `baseDate`             | La fecha base para calcular el tiempo relativo. De forma predeterminada, es `new Date()` en el momento de renderizar. **Establece esto explícitamente para evitar errores de hidratación** — consulta [más abajo](#avoiding-hydration-errors).                                                                                               |
| `options`              | Opciones de formato opcionales que siguen la especificación [`Intl.RelativeTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). De forma predeterminada, usa `numeric: 'auto'` y `style: 'long'`.                                                                  |
| `locales`              | Configuraciones regionales opcionales para especificar la configuración regional del formato. Si no se proporcionan, se usa la configuración regional del usuario. Lee más sobre cómo especificar configuraciones regionales [aquí](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Devuelve

`JSX.Element` que contiene el tiempo relativo formateado como una cadena, o `null` si no se proporciona ninguna fecha ni ningún valor.

***

## Ejemplos

### Seleccionar automáticamente la unidad a partir de un objeto Date

Pasa un objeto `Date` como contenido y el componente elige automáticamente la unidad más adecuada.

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

export default function PostTimestamp({ post }) {
    return (
        <RelativeTime>{post.createdAt}</RelativeTime> // [!code highlight]
    );
    // Salida: "hace 2 horas", "hace 3 días", "en 5 minutos", etc.
}
```


### Uso de la propiedad `date`

También puedes pasar la fecha mediante la propiedad `date` en lugar del `contenido`.

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

export default function PostTimestamp({ post }) {
    return (
        <RelativeTime date={post.createdAt} /> // [!code highlight]
    );
}
```


### Valor y unidad explícitos

Especifica un valor exacto y una unidad, igual que en la API `Intl.RelativeTimeFormat`.

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

export default function Reminder() {
    return (
        <p>
            Your trial ends <RelativeTime value={3} unit="day" />. // [!code highlight]
        </p>
    );
    // Salida: "Tu prueba termina en 3 días."
}
```


### Especificar configuraciones regionales

Muestra el tiempo relativo en una configuración regional específica.

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

export default function FrenchTimestamp({ date }) {
    return (
        <RelativeTime locales={['fr-FR']}>{date}</RelativeTime> // [!code highlight]
    );
    // Salida: "il y a 2 heures"
}
```


### Traducción de RelativeTime

Envuelve `<RelativeTime>` en un componente `<T>` para incluirlo en una frase traducida.

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

export default function Comment({ comment }) {
    return (
        <T id="commentPosted">
            Posted <RelativeTime>{comment.createdAt}</RelativeTime> // [!code highlight]
        </T>
    );
}
```


### Opciones de formato personalizadas

Controla el estilo de salida mediante las opciones de `Intl.RelativeTimeFormat`.

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

export default function NumericTimestamp({ date }) {
    return (
        <RelativeTime
            options={{
                numeric: 'always', // [!code highlight]
                style: 'narrow', // [!code highlight]
            }}
        >
            {date}
        </RelativeTime>
    );
    // Con numeric: 'always', muestra "1 day ago" en vez de "yesterday"
}
```

***


## Cómo evitar errores de hidratación

Como `<RelativeTime>` calcula el tiempo relativo localmente, puede generar **una salida distinta en el servidor y en el cliente**. Cuando React compara el HTML renderizado en el servidor con el renderizado en el cliente y no coinciden, se produce un error de hidratación.

Esto suele ocurrir cuando:

* **`baseDate` usa `new Date()` de forma predeterminada en el momento de renderizar.** El servidor renderiza en un momento determinado, y luego el cliente se hidrata segundos (o más) después. Si el tiempo relativo cruza el límite de una unidad entre esos dos momentos (por ejemplo, &quot;hace 59 segundos&quot; → &quot;hace 1 minuto&quot;), la salida no coincidirá.
* **La configuración regional predeterminada difiere entre entornos.** Si la configuración regional predeterminada del servidor no coincide con la del cliente, la cadena con formato puede variar (por ejemplo, &quot;hace 2 horas&quot; vs &quot;2 hours ago&quot;).

### Cómo solucionarlo

**Establece un `baseDate` explícito** para asegurarte de que el servidor y el cliente calculen el mismo tiempo relativo:

```jsx
const now = new Date(); // calculado una vez, pasado tanto al servidor como al cliente

<RelativeTime baseDate={now}>{post.createdAt}</RelativeTime>
```

**Especifica `locales` de forma explícita** para evitar discrepancias de configuración regional:

```jsx
<RelativeTime locales={['en-US']} baseDate={now}>
  {post.createdAt}
</RelativeTime>
```

Al fijar tanto la configuración regional como la fecha base, el servidor y el cliente siempre generarán la misma cadena con formato.


## Notas

* El componente `<RelativeTime>` es un componente variable que aplica formato a valores de tiempo relativo.
* Al usar el modo automático (con un `Date`), el componente selecciona automáticamente la unidad más adecuada.
* El componente usa [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat) internamente.
* Las opciones de formato predeterminadas son `numeric: 'auto'` y `style: 'long'`.

## Siguientes pasos

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