---
title: "React Native"
description: "Añade Tanrei a una aplicación de React Native."
url: "https://tanrei.chnotchy.com/es/getting-started/react-native/"
last_updated: 2026-10-23T21:16:19.000Z
---

# React Native

> Añade Tanrei a una aplicación de React Native.

`@tanrei/react-native` está escrito en TypeScript, sin módulos nativos, así que no hay nada que enlazar y funciona con Expo. Está pensado para la New Architecture y requiere React 19 y React Native 0.78 o posterior.

> [!WARNING]
> **Aún no publicado**
>
> `@tanrei/react-native` todavía no está en npm. Una plataforma se publica cuando se ha puesto al día con las especificaciones actuales, y hasta entonces la CI de React Native está en pausa. «Desde el código fuente», más abajo, muestra cómo se añade el paquete desde [chnotchy/tanrei](https://github.com/chnotchy/tanrei); «Cuando se publique» muestra cómo se instalará entonces.

## Instalación

### Desde el código fuente

> [!WARNING]
> **Hoy no se compila**
>
> El paquete de React Native todavía no se ha puesto al día con las especificaciones y los tokens actuales: su código fuente se escribió para una versión anterior del código de tokens generado, y su compilación se detiene con errores de tipos frente al de hoy. Su CI está en pausa hasta que se ponga al día, y la [página de estado](https://tanrei.chnotchy.com/es/status/) marca sus componentes como _rezagados_. Los pasos siguientes muestran cómo se añade a una aplicación; funcionarán cuando el paquete se haya puesto al día.

Igual que con el [paquete Web](https://tanrei.chnotchy.com/es/getting-started/web/) (Git, Node 22.22 o posterior, pnpm 12): compila el paquete en un clon del repositorio y empaquétalo,

```sh
git clone https://github.com/chnotchy/tanrei.git
cd tanrei
pnpm install
pnpm --filter @tanrei/react-native build
pnpm --filter @tanrei/react-native pack --pack-destination ../tanrei-packages
```

y luego instala el archivo empaquetado en tu aplicación:

```sh
npm install path/to/tanrei-packages/tanrei-react-native-*.tgz
```

### Cuando se publique

```sh
npm install @tanrei/react-native
```

## Uso

```tsx
import { Button, TanreiProvider } from '@tanrei/react-native';

export function App() {
  return (
    <TanreiProvider>
      <Button variant="filled" onPress={deploy}>
        Desplegar
      </Button>
      <Button variant="outlined" size="small" disabled>
        Cancelar
      </Button>
    </TanreiProvider>
  );
}
```

El componente se llama `Button`, sin prefijo, porque los módulos de JavaScript ya le dan un espacio de nombres. La activación se comunica mediante `onPress`, que es la forma propia de React Native para el evento `click` de la especificación.

## Tema y contraste

De forma predeterminada, `TanreiProvider` sigue el esquema de color del sistema. Para fijarlos, asigna a `theme` el valor `"light"` o `"dark"` y a `contrast` el valor `"standard"`, `"medium"` o `"high"`:

```tsx
<TanreiProvider theme="dark" contrast="high">
  <App />
</TanreiProvider>
```

Dentro del árbol, `useTanrei()` devuelve los colores y los estilos de texto ya resueltos para tus propias vistas:

```tsx
const theme = useTanrei();
<Text style={[theme.text('body'), { color: theme.color('onSurfaceVariant') }]}>Último despliegue hace 2 minutos</Text>;
<Text style={theme.text('heading2', { emphasized: true })}>Despliegues</Text>;
```

En esta plataforma, los estilos de texto y los roles de color usan claves en camelCase: de `heading1` a `heading6` son de `h1` a `h6`, `body` es un párrafo y `label` el texto de un control; el token `sys.color.on-surface-variant` es `onSurfaceVariant`. `emphasized` suma al peso el paso de énfasis de la familia; no es un rol aparte.

## Fuentes

Carga Inter (y Noto Sans JP, Roboto Mono) con tu configuración de fuentes habitual (por ejemplo, `expo-font`). Como React Native selecciona un archivo de fuente por cada peso, pasa a `TanreiProvider` una función `resolveFont` que haga corresponder una familia y un peso con los nombres de fuente que hayas registrado.