Zainstaluj Native-UI w mniej niż minutę

1. 1

   Zainstaluj paczkę

   npm install @polprog/native-ui

2. 2

   Załaduj Space Grotesk (opcjonalnie - zalecane)

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

3. 3

   Opakuj aplikację

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

4. 4

   Komponuj ekrany

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

Theming Nowość

Przełączaj jasny, ciemny lub systemowy błyskawicznie, albo zmień cały wygląd wariantem motywu. Native-UI ma dwa: Aurora (oryginalny) i nowy Bloom (miękki, zaokrąglony, fioletowy). Każdy wariant ma własne presety akcentu, a customAccent nadal nadpisuje pojedynczy kolor. Przekazujesz tylko to, co się zmienia.

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',      // preset akcentu aktywnego wariantu
        fontFamilies: bloomFontFamilies,
      }}
    >
      <Root />
    </NativeUIProvider>
  );
}

Presety akcentu

Tokeny

Każda powierzchnia - kolor, spacing, radius, typografia, cień - to nazwany token. Komponenty czytają wyłącznie tokeny; zmiana tokena propaguje się na cały system.

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

Dostępność

Każdy interaktywny komponent ma sensowne domyślne ustawienia dostępności: labels, hit-sloppy, focus order, role screen-readera, szacunek dla reduce-motion. Każdy domyślny można nadpisać per-instance.

<Button
  variant="primary"
  accessibilityLabel="Zapisz profil i kontynuuj"
  accessibilityHint="Zapisuje zmiany i przechodzi do następnego kroku"
  onPress={save}
>Zapisz</Button>

Zachowania platformowe

Komponenty dostosowują się do hosta: iOS używa natywnego feedbacku SF i sheetów, Android - ripple i elevation Material. Platform-correctness bez pisania platform-specific kodu.

// Ten sam komponent renderuje się poprawnie na obu platformach.
<BottomSheet snapPoints={['40%', '90%']}>
  <Heading>Wybierz plan</Heading>
</BottomSheet>

Changelog

1. v1.7.1

   2026-07-31

   Stabilna

   • Naprawiono

     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

   Stabilna

   • Dodano

     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.

Zobacz pełny changelog →