React Native Bootstrap 5 - Desktop Demo

Cette application démontre l'utilisation de la librairie @whitemordred/react-native-bootstrap5 sur desktop en utilisant React Native Web.

Fonctionnalités

✅ Tous les composants Bootstrap 5 : Buttons, Cards, Modals, Forms, Tables, etc.
✅ Thème Bootstrap authentique : Couleurs, typographie, espacements fidèles à Bootstrap 5
✅ Mode sombre/clair : Basculement dynamique entre les thèmes
✅ Responsive : Adaptation automatique aux différentes tailles d'écran
✅ Desktop optimisé : Interface adaptée aux interactions desktop
✅ Performance : Optimisé pour le web avec React Native Web

Installation et lancement

Prérequis

• Node.js 16+
• npm ou yarn

Démarrage rapide

# Installation des dépendances
npm install

# Démarrage du serveur de développement
npm start

# Build de production
npm run build

Architecture

src/
├── App.tsx          # Application principale avec démo complète
├── index.tsx        # Point d'entrée React Native Web
public/
├── index.html       # Template HTML
webpack.config.js    # Configuration Webpack
tsconfig.json       # Configuration TypeScript

Composants démontrés

Layout

• Container, Row, Col
• Grid responsive

Navigation

• Navbar
• Breadcrumb

Composants interactifs

• Button & ButtonGroup
• Modal
• Dropdown
• Offcanvas
• Toast & notifications
• Tooltip

Formulaires

• FormGroup, FormLabel, FormControl
• Checkbox, Radio, Switch
• InputGroup avec addons

Affichage de données

• Table avec styles
• ListGroup
• Progress & ProgressBar
• Pagination
• Cards

Typographie

• Headings (H1, H2, H3)
• Lead, Blockquote
• Code inline/block

Utilitaires

• Alert
• Badge
• Spinner
• DFlex (flexbox utilities)
• Spacer

Médias

• Image responsive
• Carousel

Personnalisation

L'application utilise le système de thèmes de Bootstrap 5 avec possibilité de :

• Basculer entre mode clair/sombre
• Surcharger les variables CSS
• Personnaliser les couleurs et espacements
• Adapter les breakpoints responsive

Plateformes supportées

• ✅ Web (Chrome, Firefox, Safari, Edge)
• ✅ Electron (applications desktop natives)
• ✅ PWA (Progressive Web App)

Performance

• Bundle optimisé avec code splitting
• Lazy loading des composants
• Images optimisées
• Cache de police efficace

Support et documentation

• Documentation complète
• Guide de migration
• Compatibilité plateformes
• Exemples

React Native Bootstrap 5 - L'écosystème Bootstrap natif pour React Native sur toutes les plateformes.