Instala Native-UI en menos de un minuto

1. 1

   Instala el paquete

   npm install @polprog/native-ui

2. 2

   Carga Space Grotesk (opcional - recomendado)

   npx expo install @expo-google-fonts/space-grotesk expo-font

3. 3

   Envuelve tu app

   import { NativeUIProvider } from '@polprog/native-ui';
   
   export default function App() {
     return (
       <NativeUIProvider>
         <Root />
       </NativeUIProvider>
     );
   }

4. 4

   Compón pantallas

   import { Button, Card, Heading, Stack } from '@polprog/native-ui';
   
   export function Welcome() {
     return (
       <Card>
         <Stack gap="lg">
           <Heading level={1}>Welcome</Heading>
           <Button variant="primary">Get started</Button>
         </Stack>
       </Card>
     );
   }

Tematización Nuevo

Cambia entre claro, oscuro o sistema al instante, o cambia todo el aspecto con una variante de tema. Native-UI incluye dos: Aurora (la original) y la nueva Bloom (suave, redondeada, violeta). Cada variante lleva sus propios presets de acento, y customAccent sigue sobrescribiendo un solo color. Solo pasas lo que cambia.

import { NativeUIProvider, bloomFontFamilies } from '@polprog/native-ui';

export default function App() {
  return (
    <NativeUIProvider
      config={{
        theme: 'bloom',        // 'default' (Aurora) | 'bloom'
        colorMode: 'system',   // 'light' | 'dark' | 'system'
        preset: 'violet',      // accent preset for the active variant
        fontFamilies: bloomFontFamilies,
      }}
    >
      <Root />
    </NativeUIProvider>
  );
}

Presets de acento

Tokens de diseño

Cada superficie - color, espaciado, radio, tipografía, sombra - es un token con nombre. Los componentes solo leen tokens; cambiar un token se propaga por todo el sistema.

import { useTheme } from '@polprog/native-ui';

function Banner() {
  const t = useTheme();
  return (
    <View style={{ backgroundColor: t.colors.accent, padding: t.spacing.lg, borderRadius: t.radii.lg }} />
  );
}

Accesibilidad

Cada componente interactivo incluye valores de accesibilidad por defecto: etiquetas, hit-slops, orden de foco, roles de lector de pantalla, respeto al reduce-motion. Puedes sobrescribir cualquier valor por instancia.

<Button
  variant="primary"
  accessibilityLabel="Save profile and continue"
  accessibilityHint="Saves your changes and moves to the next step"
  onPress={save}
>Save</Button>

Comportamiento de plataforma

Los componentes se adaptan a la plataforma anfitriona: iOS usa feedback de pulsación nativo de SF y dimensionado de sheet, Android usa ripple y elevación Material. Obtienes corrección de plataforma sin escribir código de plataforma.

// The same component renders correctly on both platforms.
<BottomSheet snapPoints={['40%', '90%']}>
  <Heading>Choose a plan</Heading>
</BottomSheet>

Registro de cambios

1. v1.7.1

   2026-07-31

   Estable

   • Corregido

     Add the react-native condition to the root exports entry so Metro resolves the TypeScript source instead of the dist bundles. Metro in React Native 0.84 enables package exports by default, and an exports map takes precedence over the top-level react-native field, so consumers were bundling both dist flavours (.mjs and .js) at once and needed per-app resolveRequest workarounds.

2. v1.7.0

   2026-06-23

   Estable

   • Añadido

     Add the Bloom theme variant and a theme config key. NativeUIProvider now accepts theme: 'default' | 'bloom' | ThemeVariant. A theme variant bundles a complete visual identity (colour palette, corner radii, elevation, type density, and default fonts) behind one name and restyles every component. The new Bloom variant is a soft, rounded look: violet/pink accents, rounded corners, purple-tinted neutrals, and Outfit + Plus Jakarta Sans typography. The original look ships unchanged as the Aurora ('default') variant, so existing apps are unaffected. FontFamilies gains an optional display group so a variant can pair a heading family with a separate body family. New exports: THEME_VARIANTS, defaultThemeVariant, bloomThemeVariant, resolveThemeVariant, defaultColorPalette, bloomColorPalette, BLOOM_PRESETS, bloomFontFamilies, and the types ThemeVariant, ThemeVariantName, ColorPalette, TextRamp, SemanticRamp, NeutralRamp, BloomPreset, BorderRadiusScale.

Ver el registro completo →