Installez Native-UI en moins d'une minute

1. 1

   Installez le paquet

   npm install @polprog/native-ui

2. 2

   Chargez Space Grotesk (optionnel - recommandé)

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

3. 3

   Enveloppez votre app

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

4. 4

   Composez les écrans

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

Thématisation Nouveau

Basculez entre clair, sombre ou système instantanément, ou changez tout l'aspect avec une variante de thème. Native-UI en livre deux : Aurora (l'originale) et la nouvelle Bloom (douce, arrondie, violette). Chaque variante porte ses propres presets d'accent, et customAccent remplace toujours une seule couleur. Vous ne passez que ce qui change.

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 d'accent

Tokens de design

Chaque surface - couleur, espacement, rayon, typographie, ombre - est un token nommé. Les composants ne lisent que des tokens ; changer un token se propage dans tout le système.

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

Accessibilité

Chaque composant interactif est livré avec des valeurs d'accessibilité par défaut : libellés, hit-slops, ordre de focus, rôles pour lecteur d'écran, respect du reduce-motion. Vous pouvez remplacer toute valeur par défaut par instance.

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

Comportement de plateforme

Les composants s'adaptent à la plateforme hôte : iOS utilise le retour de pression natif SF et le dimensionnement de sheet, Android utilise le ripple et l'élévation Material. Vous obtenez la justesse de plateforme sans écrire de code de plateforme.

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

Journal des modifications

1. v1.7.1

   2026-07-31

   Stable

   • Corrigé

     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

   Stable

   • Ajouté

     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.

Voir le journal complet →