Por qué estoy creando Radix Native

El problema de siempre

En mi trabajo hacemos desarrollo web y mobile. En web usamos Radix Themes — los diseñadores de UX/UI trabajan con el Figma de Radix, los devs implementan con los componentes de Radix, y todo fluye bastante bien.

El problema es cuando hay que hacer la app.

React Native no tiene Radix. Los componentes que el equipo de diseño arma en Figma basándose en Radix no tienen un equivalente directo del lado nativo. Cada proyecto nuevo significa lo mismo: agarrar los diseños, mirar los componentes de Radix que usaron, y adaptarlos manualmente a React Native.

Lo que probamos

Primero usamos NativeWind — Tailwind para React Native. Funcionaba, pero cuando necesitabas cambiar la apariencia general de la app (colores, bordes, tipografía) tenías que tocar demasiados archivos.

Después nos pasamos a UniWind porque al tener archivos .css nos daba más flexibilidad para manejar múltiples estilos según lo que necesitara cada proyecto. Pero al final el problema de fondo seguía siendo el mismo: no teníamos una librería de componentes que matcheara con lo que diseño nos entregaba, y armar una desde cero para cada proyecto no era viable.

Nuestros proyectos suelen ser cortos. Plazos ajustados, alcance definido, y poca margen para invertir tiempo en infraestructura de UI. Lo que más nos importa es poder agarrar un set de componentes base y con cambios de colores, bordes y tipografía darle una identidad visual diferente sin reescribir todo.

La idea

Empecé Radix Native en mis tiempos libres. La premisa es simple: si el equipo de diseño usa Radix en Figma y los devs web usan Radix Themes en React, los devs mobile deberían poder usar la misma API en React Native.

import { Theme, Text, Button, Flex, Badge, Switch } from "radix-native";

export default function App() {
  return (
    <Theme accentColor="indigo" appearance="light">
      <Flex direction="column" gap={4} p={4}>
        <Text size={5} weight="bold">
          Hello, Radix Native
        </Text>
        <Badge variant="soft" color="green">v0.2.0</Badge>
        <Switch defaultChecked />
        <Button variant="solid" size={3}>
          <Text>Get Started</Text>
        </Button>
      </Flex>
    </Theme>
  );
}

Mismos nombres de componentes, mismas props, mismas variantes. Si conocés Radix en web, ya sabés usar Radix Native.

Qué prioricé primero

En vez de salir a hacer todos los componentes, me enfoqué en el sistema de temas. Poder cambiar colores y fuentes de forma global es lo que más impacto tiene en nuestro día a día.

React Native no tiene CSS variables ni clases, así que lo que en web se resuelve con custom properties acá lo tuve que hacer diferente:

• colorOverrides para reemplazar cualquier paso de color de las 31 escalas que trae Radix
• fonts para definir tipografías custom por peso
• Temas anidados para poder sobrescribir configuración en un subárbol de componentes

<Theme
  accentColor="red"
  colorOverrides={{
    red: {
      light: { 9: "#e54666", 10: "#dc3b5d" },
      dark: { 9: "#e5484d", 10: "#ec5d5e" },
    },
  }}
>

Con esto, cambiar la identidad visual de una app es cuestión de modificar las props del <Theme> y listo. Sin tocar componentes individuales.

Estado actual

La librería va por la v0.2.0 con 30 componentes organizados en 6 categorías:

• Layout — Box, Flex, Grid, Separator, Card
• Typography — Text, Heading, Link, Blockquote, Code, Kbd, Em, Strong, Quote
• Display — Avatar, Badge
• Actions — Button, IconButton, Checkbox, CheckboxGroup, CheckboxCards, Switch, Radio, RadioGroup, RadioCards
• Feedback — Spinner, Progress
• Forms — TextField, TextArea

El sistema de colores incluye las 31 escalas de Radix con soporte para dark mode. Tiene zero runtime dependencies más allá de React y React Native, soporte de accesibilidad con roles semánticos y screen readers, y press animations que dan feedback visual sutil en los componentes interactivos.

Todavía faltan componentes importantes (dialogs, selects, dropdowns, etc.), pero con 30 componentes ya es bastante usable para proyectos reales.

Contribuciones

El repo es público y cualquier sugerencia o PR es bienvenida:

github.com/Atotaro98/radix-native

Si trabajás con React Native y te pasa lo mismo que a nosotros — adaptar diseños de Radix a mobile una y otra vez — probalo. Y si encontrás algo que mejorar o querés sumar un componente, mejor todavía.