Instala a Native-UI em menos de um minuto

1. 1

   Instala o pacote

   npm install @polprog/native-ui

2. 2

   Carrega a Space Grotesk (opcional - recomendado)

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

3. 3

   Envolve a tua app

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

4. 4

   Compõe ecrãs

   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>
     );
   }

Temas Novo

Muda entre claro, escuro ou sistema instantaneamente, ou troca todo o aspeto com uma variante de tema. A Native-UI inclui duas: Aurora (a original) e a nova Bloom (suave, arredondada, violeta). Cada variante traz os seus próprios presets de acento, e o customAccent continua a sobrepor uma única cor. Só passas o que muda.

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 design

Cada superfície - cor, espaçamento, raio, tipografia, sombra - é um token nomeado. Os componentes apenas leem tokens; alterar um token propaga-se por todo o 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 }} />
  );
}

Acessibilidade

Cada componente interativo vem com valores de acessibilidade por defeito: etiquetas, hit-slops, ordem de foco, funções de leitor de ecrã, respeito pelo reduce-motion. Podes sobrepor qualquer valor por instância.

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

Comportamento de plataforma

Os componentes adaptam-se à plataforma anfitriã: o iOS usa feedback de pressão nativo do SF e dimensionamento de sheet, o Android usa ripple e elevação Material. Obténs correção de plataforma sem escrever código de plataforma.

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

Registo de alterações

1. v1.7.1

   2026-07-31

   Estável

   • Corrigido

     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

   Estável

   • Adicionado

     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 o registo completo →