React Native DaisyUI

Adaptation de DaisyUI pour React Native utilisant NativeWind. Cette bibliothèque vous permet d'utiliser les composants et classes DaisyUI dans vos applications React Native de la même façon que sur le web.

Installation

bun install react-native-daisy-ui

Prérequis :

• React Native 0.73+
• React 19.1.1+
• Une configuration Tailwind minimale avec NativeWind et DaisyUI (voir section Configuration ci-dessous)

Note : Cette lib utilise NativeWind en interne. Votre app doit avoir une config Tailwind, mais vous n'avez pas besoin de configurer NativeWind vous-même - il suffit d'avoir un tailwind.config.js avec le preset NativeWind et le plugin DaisyUI.

Utilisation

Composants

import { Button, Card, Badge, Alert, Chat } from "react-native-daisy-ui";

function App() {
  return (
    <>
      <Button
        variant="primary"
        size="lg"
        onPress={() => console.log("Clicked!")}
      >
        Cliquez-moi
      </Button>

      <Card bordered>
        <CardBody>
          <CardTitle>Mon titre</CardTitle>
          <Text>Contenu de la carte</Text>
        </CardBody>
      </Card>

      <Badge variant="accent" size="lg">
        Nouveau
      </Badge>

      <Alert variant="success">Opération réussie !</Alert>

      <Chat>
        <ChatBubble start>
          <ChatHeader>Utilisateur</ChatHeader>
          <Text>Message de chat</Text>
        </ChatBubble>
      </Chat>
    </>
  );
}

Classes DaisyUI

Vous pouvez également utiliser directement les classes DaisyUI avec NativeWind :

import { daisyClasses } from "react-native-daisy-ui";
import { View, Text } from "react-native";

function CustomComponent() {
  return (
    <View
      className={daisyClasses.button.base + " " + daisyClasses.button.primary}
    >
      <Text>Bouton personnalisé</Text>
    </View>
  );
}

Ou utilisez les classes directement :

import { View, Text } from "react-native";

function CustomComponent() {
  return (
    <View className="btn btn-primary btn-lg">
      <Text>Bouton avec classes DaisyUI</Text>
    </View>
  );
}

Composants disponibles

Formulaires

• Input - Champs de saisie avec variantes
• Textarea - Zones de texte multilignes
• Select - Sélecteurs avec options
• Checkbox - Cases à cocher
• Radio - Boutons radio
• Toggle - Interrupteurs
• Range - Curseurs de plage
• FileInput - Sélection de fichiers
• FormControl, Label, HelperText - Contrôles de formulaire

Interface utilisateur

• Button - Boutons avec variantes et tailles
• Card, CardBody, CardTitle, CardActions, CardFigure - Cartes
• Badge - Badges avec variantes
• Alert - Alertes avec variantes
• Avatar - Avatars avec indicateurs
• Modal, ModalAction, ModalClose - Modales
• Dropdown - Menus déroulants
• Drawer, DrawerSide, DrawerToggle - Tiroirs latéraux
• Tabs - Onglets

Feedback

• Progress - Barres de progression
• Loading - Indicateurs de chargement
• Skeleton - Placeholders de chargement
• Tooltip - Infobulles

Navigation

• Breadcrumbs - Fil d'Ariane
• Link - Liens
• Menu - Menus
• Navbar, NavbarStart, NavbarCenter, NavbarEnd - Barres de navigation
• Steps - Étapes de processus

Données

• Stats - Statistiques
• Table - Tableaux
• Rating - Évaluations par étoiles

Chat

• Chat, ChatBubble, ChatHeader, ChatFooter, ChatTime, ChatImage - Composants de chat

Utilitaires

• Divider - Séparateurs
• Join, JoinItem - Groupements
• Swap - Échange de contenu
• Stack - Empilement
• Indicator - Indicateurs
• Kbd - Représentation de touches clavier
• Countdown - Compte à rebours

Layout

• Artboard - Zones de travail
• Mockup - Maquettes
• RadialProgress - Progression radiale

Classes disponibles

Toutes les classes DaisyUI sont exportées dans classes.ts et accessibles via :

• daisyClasses - Objet organisé par catégorie
• allDaisyClasses - Tableau plat de toutes les classes
• Exports individuels : button, card, badge, alert, chat, etc.

Configuration

Configuration Tailwind minimale requise

Votre app doit avoir une configuration Tailwind avec NativeWind et DaisyUI. Vous pouvez utiliser la config par défaut fournie :

Option 1 : Utiliser la config par défaut de la lib

Créez un tailwind.config.js dans votre projet :

// tailwind.config.js
const { defaultConfig } = require("react-native-daisy-ui/tailwind.config");

module.exports = {
  ...defaultConfig,
  // Vos personnalisations ici (optionnel)
};

Option 2 : Config manuelle minimale

// tailwind.config.js
module.exports = {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/react-native-daisy-ui/**/*.{js,jsx,ts,tsx}",
  ],
  presets: [require("nativewind/preset")],
  plugins: [require("daisyui")],
  daisyui: {
    themes: true, // ou un tableau de thèmes spécifiques: ["light", "dark", "cupcake", ...]
    darkTheme: "dark",
    base: true,
    styled: true,
    utils: true,
  },
};

Configuration de darkMode (optionnel)

darkMode: "class" est optionnel - il n'est nécessaire que si vous voulez utiliser ThemeProvider pour changer de thème dynamiquement.

• Sans darkMode: "class" : Les composants fonctionnent normalement, mais le changement de thème dynamique via ThemeProvider ne sera pas disponible.
• Avec darkMode: "class" : Vous pouvez utiliser ThemeProvider pour changer de thème à la volée.

Pour activer le changement de thème, ajoutez darkMode: "class" APRÈS le preset :

module.exports = {
  presets: [require("nativewind/preset")],
  darkMode: "class", // ⚠️ Doit être APRÈS le preset
  // ... reste de la config
};

Note : Les composants fonctionnent parfaitement sans darkMode: "class". Cette option est uniquement nécessaire pour le changement de thème dynamique.

Gestion des thèmes

Les composants DaisyUI fonctionnent sans configuration de thème !

Les composants utilisent automatiquement les thèmes configurés dans votre tailwind.config.js. Vous pouvez utiliser les composants directement sans ThemeProvider :

import { Button, Card } from "react-native-daisy-ui";

function App() {
  return (
    <>
      <Button variant="primary">Mon bouton</Button>
      <Card>Ma carte</Card>
    </>
  );
}

ThemeProvider est optionnel - il n'est nécessaire que si vous voulez changer de thème dynamiquement dans votre app. Les composants fonctionnent parfaitement sans lui.

Utiliser vos propres thèmes personnalisés

Si vous avez défini vos propres thèmes DaisyUI (comme dans votre app), vous pouvez les utiliser avec cette bibliothèque :

Important : Les utilitaires de thème doivent être importés explicitement depuis react-native-daisy-ui/utils pour éviter les problèmes avec Metro bundler.

1. Définir vos thèmes

// themes.ts
import type { DaisyThemeConfig } from "react-native-daisy-ui/utils";
// ou
import type { DaisyThemeConfig } from "react-native-daisy-ui/utils/theme";

export const lightTheme: DaisyThemeConfig = {
  name: "light",
  default: false,
  prefersdark: false,
  colorScheme: "light",
  "--color-base-100": "oklch(98% 0 0)",
  "--color-base-200": "oklch(97% 0 0)",
  "--color-base-300": "oklch(92% 0 0)",
  "--color-base-content": "oklch(20% 0 0)",
  "--color-primary": "oklch(83% 0.128 66.29)",
  "--color-primary-content": "oklch(29% 0.066 243.157)",
  // ... autres variables
};

export const darkTheme: DaisyThemeConfig = {
  name: "dark",
  default: true,
  prefersdark: true,
  colorScheme: "dark",
  "--color-base-100": "oklch(14% 0 0)",
  // ... autres variables
};

2. Configurer Tailwind avec vos thèmes

Dans votre tailwind.config.js, utilisez generateThemeConfig pour convertir vos thèmes :

const {
  generateThemeConfig,
} = require("react-native-daisy-ui/utils/applyTheme");
const { lightTheme, darkTheme } = require("./themes");

const themeConfig = generateThemeConfig([lightTheme, darkTheme]);

module.exports = {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "./node_modules/react-native-daisy-ui/**/*.{js,jsx,ts,tsx}",
  ],
  presets: [require("nativewind/preset")],
  plugins: [require("daisyui")],
  theme: {
    extend: {
      colors: themeConfig.colors,
      borderRadius: themeConfig.borderRadius,
    },
  },
  daisyui: {
    themes: false, // Désactivez les thèmes par défaut de DaisyUI
    base: true,
    styled: true,
    utils: true,
  },
};

3. Utiliser le ThemeProvider (optionnel)

Note : ThemeProvider est optionnel. Les composants fonctionnent sans lui. Il n'est nécessaire que si vous voulez changer de thème dynamiquement dans votre app.

Prérequis : Pour utiliser ThemeProvider, vous devez avoir darkMode: "class" dans votre tailwind.config.js (voir section Configuration ci-dessus).

Pour gérer le changement de thème dans votre app :

// Import explicite depuis utils (nécessaire pour éviter les problèmes Metro)
import { ThemeProvider } from "react-native-daisy-ui/utils/theme";
// ou
import { ThemeProvider } from "react-native-daisy-ui/utils";
import { lightTheme, darkTheme } from "./themes";

function App() {
  return (
    <ThemeProvider themes={{ light: lightTheme, dark: darkTheme }}>
      <YourAppContent />
    </ThemeProvider>
  );
}

4. Changer de thème

import { useColorScheme } from "nativewind";
import { Toggle } from "react-native-daisy-ui";

function ThemeToggle() {
  const { colorScheme, setColorScheme } = useColorScheme();

  return (
    <Toggle
      checked={colorScheme === "dark"}
      onPress={() => setColorScheme(colorScheme === "dark" ? "light" : "dark")}
    />
  );
}

Important : Les composants importés de react-native-daisy-ui utiliseront automatiquement les couleurs définies dans votre tailwind.config.js, donc vos thèmes personnalisés s'appliqueront automatiquement !

Exemple complet

// 1. Définir vos thèmes (themes.ts)
import type { DaisyThemeConfig } from "react-native-daisy-ui/utils/theme";

export const lightTheme: DaisyThemeConfig = {
  name: "light",
  colorScheme: "light",
  "--color-base-100": "oklch(98% 0 0)",
  "--color-primary": "oklch(83% 0.128 66.29)",
  // ... toutes vos variables
};

export const darkTheme: DaisyThemeConfig = {
  name: "dark",
  colorScheme: "dark",
  "--color-base-100": "oklch(14% 0 0)",
  // ... toutes vos variables
};

// 2. Configurer Tailwind (tailwind.config.js)
const {
  generateThemeConfig,
} = require("react-native-daisy-ui/utils/applyTheme");
const { lightTheme, darkTheme } = require("./themes");

const themeConfig = generateThemeConfig([lightTheme, darkTheme]);

module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  plugins: [require("daisyui")],
  theme: {
    extend: {
      colors: themeConfig.colors,
      borderRadius: themeConfig.borderRadius,
    },
  },
  daisyui: {
    themes: false, // Désactivez les thèmes par défaut
  },
};

// 3. Utiliser dans votre app
import { Button, Card } from "react-native-daisy-ui";
import { useColorScheme } from "nativewind";

function App() {
  const { colorScheme, setColorScheme } = useColorScheme();

  return (
    <>
      <Button variant="primary">Mon bouton</Button>
      <Card>Ma carte</Card>
      {/* Les composants utilisent automatiquement vos thèmes personnalisés ! */}
    </>
  );
}

Comment ça fonctionne

1. NativeWind gère le color scheme (light / dark) via le hook useColorScheme
2. DaisyUI détecte automatiquement le color scheme et applique les variables CSS correspondantes
3. Les composants utilisent les classes DaisyUI qui référencent ces variables (ex: btn-primary, card, etc.)
4. Quand vous changez le thème, tous les composants se mettent à jour automatiquement

Utilisation basique

import { useColorScheme } from "nativewind";
import { Toggle } from "react-native-daisy-ui";

function ThemeToggle() {
  const { colorScheme, setColorScheme } = useColorScheme();

  return (
    <Toggle
      checked={colorScheme === "dark"}
      onPress={() => setColorScheme(colorScheme === "dark" ? "light" : "dark")}
    />
  );
}

Exemple complet avec sauvegarde

import { useColorScheme } from "nativewind";
import { useEffect } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { Toggle } from "react-native-daisy-ui";

function ThemeToggle() {
  const { colorScheme, setColorScheme } = useColorScheme();

  // Charger le thème sauvegardé au démarrage
  useEffect(() => {
    AsyncStorage.getItem("theme").then((savedTheme) => {
      if (savedTheme && (savedTheme === "light" || savedTheme === "dark")) {
        setColorScheme(savedTheme);
      }
    });
  }, []);

  // Sauvegarder le thème quand il change
  const handleToggle = () => {
    const newTheme = colorScheme === "dark" ? "light" : "dark";
    setColorScheme(newTheme);
    AsyncStorage.setItem("theme", newTheme);
  };

  return <Toggle checked={colorScheme === "dark"} onPress={handleToggle} />;
}

Comment ça fonctionne

1. NativeWind gère le color scheme (light / dark)
2. DaisyUI détecte le color scheme et applique les variables CSS correspondantes
3. Les composants utilisent automatiquement les classes DaisyUI qui référencent ces variables
4. Quand vous changez le thème via setTheme(), tous les composants se mettent à jour automatiquement

Thèmes disponibles

DaisyUI supporte de nombreux thèmes : light, dark, cupcake, bumblebee, emerald, corporate, synthwave, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter.

Pour utiliser un thème spécifique, configurez-le dans votre tailwind.config.js :

daisyui: {
  themes: ["light", "dark", "cupcake"], // Liste des thèmes à activer
  darkTheme: "dark", // Thème à utiliser en mode sombre
}

Notes

• Cette bibliothèque nécessite que DaisyUI soit installé et configuré dans votre projet NativeWind
• Les thèmes DaisyUI s'appliquent automatiquement via NativeWind's color scheme
• Certains composants web n'ont pas d'équivalent direct en React Native (ex: certains éléments de formulaire)
• Les interactions hover/focus sont adaptées pour le mobile

Licence

MIT