Installez Native-UI en moins d'une minute

1. 1

   Installez le paquet et ses dépendances peer

   npm install @polprog/native-ui react-native-reanimated react-native-safe-area-context
   
   # Optional, for DatePickerInput and DateRangePickerInput
   npm install @react-native-community/datetimepicker

2. 2

   Chargez Space Grotesk (utilisée par le thème Aurora par défaut)

   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, VStack } from '@polprog/native-ui';
   
   export function Welcome({ onStart }: { onStart: () => void }) {
     return (
       <Card>
         <VStack gap="lg">
           <Heading level={1}>Welcome</Heading>
           <Button title="Get started" onPress={onStart} />
         </VStack>
       </Card>
     );
   }

Mettre à niveau depuis la 1.x 2.0

La version 2.0 nécessite React 19, React Native 0.84+ et Reanimated 4, et supprime les API dépréciées en 1.x. Les renommages ci-dessous couvrent la plupart des apps. Le guide liste chaque changement avec le code avant et après.

// 1.x                                  // 2.0
useThemeColors()                      →  useColors()
<Button variant="destructive" />      →  <Button variant="danger" />
<Card longPressHint="…" />            →  <Card accessibilityHint="…" />
<Select selectedValue onValueChange>  →  <Select value onChange>
typography.amount / amountLarge       →  typography.mono / monoLarge

Lire le guide de mise à niveau complet →

Thématisation

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 Bloom (douce, arrondie, violette). Chaque variante porte ses propres presets d'accent, customAccent remplace une seule couleur et theme.components remplace les tokens de n'importe quel composant. 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, donc changer un token se propage dans tout le système.

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

function Banner() {
  const theme = useTheme();

  return (
    <View
      style={{
        backgroundColor: theme.colors.primaryLight,
        padding: theme.spacing.lg,
        borderRadius: theme.borderRadius.lg,
      }}
    />
  );
}

Accessibilité

Chaque composant interactif est livré avec des valeurs d'accessibilité par défaut : rôles, libellés, hit slop, annonces pour lecteur d'écran et prise en charge du mouvement réduit. Les couleurs de texte sont vérifiées selon le contraste WCAG sur chaque surface (minTextContrast, 4.5 par défaut, 7 pour AAA). Vous pouvez remplacer toute valeur par défaut par instance.

<NativeUIProvider config={{ minTextContrast: 7 }}>
  <Button
    title="Save"
    accessibilityHint="Saves your changes and moves to the next step"
    onPress={save}
  />
</NativeUIProvider>

Comportement de plateforme

Les composants s'adaptent à la plateforme hôte : retours haptiques, zones sûres, gestion du clavier et boîtes de dialogue suivent les conventions iOS et Android, InputPrompt utilise le prompt système sur iOS, et les lecteurs d'écran peuvent fermer les sheets avec leur geste d'échappement. Vous obtenez la justesse de plateforme sans écrire de code de plateforme.

// The same sheet on iOS and Android: drag it down to dismiss it.
<BottomSheet visible={open} onClose={() => setOpen(false)}>
  <BottomSheet.Header>
    <Heading level={3}>Choose a plan</Heading>
  </BottomSheet.Header>
  <BottomSheet.Body>
    <PlanList />
  </BottomSheet.Body>
</BottomSheet>

Localisation Nouveau

Chaque chaîne affichée par la bibliothèque, des indications de boutons aux unités du compte à rebours, provient de l'option labels. Passez une locale et uniquement les libellés que vous traduisez. Les autres restent en anglais. Les icônes et le chevron de retour s'inversent dans les mises en page de droite à gauche.

<NativeUIProvider
  config={{
    locale: 'pl-PL',
    labels: { close: 'Zamknij', clear: 'Wyczyść', goBack: 'Wróć' },
  }}
>
  <Root />
</NativeUIProvider>

Journal des modifications

1. v2.0.0

   2026-10-29

   Stable

   Version axée sur l'accessibilité, la configuration et la robustesse

   • Ajouté

     Accessibility, configuration and robustness release. Breaking: see the "Upgrading to 2.0" guide in Storybook for every change that needs code edits.

     • Removed (deprecated since 1.x): useThemeColors (use useColors), Button variant="destructive" (use danger), typography amount / amountLarge / amountSmall (use mono*), Card longPressHint (use accessibilityHint), Select selectedValue / onValueChange (use value / onChange), unused Select tokens (titlePadding*, cancelPaddingVertical, cancelMarginTop, minBottomPadding).
     • Peer ranges now start at verified versions: React 19, React Native 0.84, Reanimated 4 (required), Safe Area Context 5, DateTimePicker 9.
     • usePressableScale always uses Reanimated; its result no longer has isReanimated and animatedStyle is a Reanimated animated style.
     • Color: new onPrimary, onSuccess, onWarning, onError, onInfo tokens computed with WCAG contrast (minTextContrast, default 4.5). Light-mode primary buttons now use dark text where white was unreadable (1.7:1 on the default green). textInverse is an alias of onPrimary. The default light error is now #DC2626 (white on the old #EF4444 was 3.8:1). getContrastText uses WCAG luminance. New helpers: contrastRatio, resolveOnColor, withAlpha.
     • +18 more…
2. v1.7.2

   2026-10-27

   Stable

   • Corrigé

     Fix type checking against React Native 0.87 and newer. Box and Stack no longer assign to readonly style properties, and the ref of Input, TextArea and SearchBar is typed as the TextInput instance via ComponentRef<typeof TextInput>, which matches older React Native versions as well. Input, TextArea and PressableScale now declare their exported types explicitly, so the published declarations no longer depend on React Native internal type names.

Voir le journal complet →