React Native Bootstrap 5

Une librairie React Native complète qui réplique Bootstrap 5 avec support total des thèmes et modes dark/light.

🚀 Fonctionnalités

• ✅ 100% Bootstrap 5.3 - Tous les composants et fonctionnalités
• 🎨 Système de thème complet - Variables CSS surchargeables
• 🌙 Mode Dark/Light - Basé sur React Context API
• 🎯 Toutes les couleurs Bootstrap - Incluant indigo, pink, teal, etc.
• 🔥 Variables RGB - Support complet des opacités
• 💫 Emphasis & Subtle - Toutes les variantes Bootstrap 5.3
• 🛠️ Utilities classes - text-, bg-, border-*
• 📱 Multi-plateforme - iOS, Android, Web, Windows, macOS
• 🌐 React Native Web - Support complet pour le web
• 🖥️ React Native Windows - Compatible Windows 10/11
• 🍎 React Native macOS - Support natif macOS
• 🎯 TypeScript - Support complet TypeScript
• ⚡ Performance - Optimisé avec StyleSheet natif
• 🔧 Flexbox natif - Système de grille fidèle à Bootstrap

📦 Installation

npm install @whitemordred/react-native-bootstrap5
# ou
yarn add @whitemordred/react-native-bootstrap5

🎯 Utilisation de base

import React from 'react';
import { BootstrapProvider, Button, Container } from '@whitemordred/react-native-bootstrap5';

const customTheme = {
  colors: {
    primary: '#ff5733',
    dark: {
      background: '#121212',
      text: '#ffffff'
    },
  }
};

export default function App() {
  return (
    <BootstrapProvider theme={customTheme} mode="dark">
      <Container>
        <Button variant="primary">Cliquez-moi</Button>
      </Container>
    </BootstrapProvider>
  );
}

🧩 Composants disponibles

Boutons

import { Button } from '@whitemordred/react-native-bootstrap5';

// Toutes les variantes Bootstrap 5
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="danger">Danger</Button>
<Button variant="warning">Warning</Button>
<Button variant="info">Info</Button>
<Button variant="light">Light</Button>
<Button variant="dark">Dark</Button>
<Button variant="link">Link</Button>

// Couleurs étendues
<Button variant="indigo">Indigo</Button>
<Button variant="purple">Purple</Button>
<Button variant="pink">Pink</Button>
<Button variant="orange">Orange</Button>
<Button variant="teal">Teal</Button>
<Button variant="cyan">Cyan</Button>

// Variantes outline (toutes disponibles)
<Button variant="outline-primary">Outline Primary</Button>
<Button variant="outline-indigo">Outline Indigo</Button>

// Options avancées
<Button pill>Pill Button</Button>
<Button gradient>Gradient</Button>
<Button active>Active State</Button>

// Tailles
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>

// Block button
<Button block>Block Button</Button>

// États
<Button disabled>Disabled</Button>
<Button loading>Loading...</Button>

Cards

import { 
  Card, 
  CardHeader, 
  CardBody, 
  CardFooter, 
  CardTitle, 
  CardText,
  CardImage 
} from '@whitemordred/react-native-bootstrap5';

<Card>
  <CardImage source={{ uri: 'https://example.com/image.jpg' }} top />
  <CardHeader>En-tête de la card</CardHeader>
  <CardBody>
    <CardTitle>Titre de la card</CardTitle>
    <CardText>
      Texte du contenu de la card avec des informations utiles.
    </CardText>
    <Button variant="primary">Action</Button>
  </CardBody>
  <CardFooter>
    Pied de page de la card
  </CardFooter>
</Card>

Système de grille

import { Container, Row, Col } from '@whitemordred/react-native-bootstrap5';

<Container fluid>
  <Row>
    <Col xs={12} sm={6} md={4}>
      Colonne 1
    </Col>
    <Col xs={12} sm={6} md={4}>
      Colonne 2
    </Col>
    <Col xs={12} sm={12} md={4}>
      Colonne 3
    </Col>
  </Row>
</Container>

Modals

import { 
  Modal, 
  ModalHeader, 
  ModalBody, 
  ModalFooter 
} from '@whitemordred/react-native-bootstrap5';

const [visible, setVisible] = useState(false);

<Modal 
  visible={visible} 
  onClose={() => setVisible(false)}
  size="lg"
  centered
>
  <ModalHeader onClose={() => setVisible(false)}>
    Titre du modal
  </ModalHeader>
  <ModalBody>
    Contenu du modal
  </ModalBody>
  <ModalFooter>
    <Button variant="secondary" onPress={() => setVisible(false)}>
      Annuler
    </Button>
    <Button variant="primary" onPress={() => setVisible(false)}>
      Sauvegarder
    </Button>
  </ModalFooter>
</Modal>

Formulaires

import { 
  FormGroup, 
  FormLabel, 
  FormControl, 
  FormText, 
  InvalidFeedback 
} from '@whitemordred/react-native-bootstrap5';

<FormGroup>
  <FormLabel required>Nom</FormLabel>
  <FormControl
    placeholder="Entrez votre nom"
    value={name}
    onChangeText={setName}
    isInvalid={!!errors.name}
  />
  {errors.name && (
    <InvalidFeedback>{errors.name}</InvalidFeedback>
  )}
  <FormText muted>Votre nom complet</FormText>
</FormGroup>

🎨 Gestion des thèmes

BootstrapProvider

Le composant BootstrapProvider doit envelopper votre application :

import { BootstrapProvider } from '@whitemordred/react-native-bootstrap5';

<BootstrapProvider 
  theme={customTheme} 
  mode="light" // 'light' | 'dark'
  followSystemTheme={true} // suit le thème système
>
  <App />
</BootstrapProvider>

Hook useTheme

import { useTheme } from '@whitemordred/react-native-bootstrap5';

function MyComponent() {
  const { theme, mode, setMode, toggleMode, currentColors } = useTheme();

  return (
    <View style={{ backgroundColor: currentColors.background }}>
      <Button onPress={toggleMode}>
        Mode actuel: {mode}
      </Button>
    </View>
  );
}

Personnalisation du thème

const customTheme = {
  colors: {
    primary: '#ff5733',
    secondary: '#6c757d',
    success: '#28a745',
    // ... autres couleurs
  },
  darkColors: {
    background: '#121212',
    surface: '#1e1e1e',
    text: '#ffffff',
    primary: '#ff7961',
    // ... autres couleurs pour le mode sombre
  },
  spacing: {
    0: 0,
    1: 4,
    2: 8,
    3: 16,
    4: 24,
    5: 48,
  },
  typography: {
    fontSizes: {
      xs: 12,
      sm: 14,
      base: 16,
      lg: 18,
      xl: 20,
      '2xl': 24,
    },
    fontWeights: {
      light: '300',
      normal: '400',
      medium: '500',
      semibold: '600',
      bold: '700',
    },
  },
  borderRadius: {
    none: 0,
    sm: 2,
    base: 4,
    md: 6,
    lg: 8,
    xl: 12,
    full: 9999,
  },
  shadows: {
    sm: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.05,
      shadowRadius: 2,
      elevation: 2,
    },
    // ... autres ombres
  },
};

🎯 Props des composants

Button

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | ButtonVariant | 'primary' | Variante du bouton | | size | 'sm' | 'lg' | 'default' | 'default' | Taille du bouton | | disabled | boolean | false | Bouton désactivé | | loading | boolean | false | Affiche un spinner | | block | boolean | false | Bouton pleine largeur |

Card

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | - | Contenu de la card | | style | ViewStyle | - | Styles personnalisés |

Modal

| Prop | Type | Default | Description | |------|------|---------|-------------| | visible | boolean | - | Visibilité du modal | | onClose | () => void | - | Callback de fermeture | | size | 'sm' | 'lg' | 'xl' | 'default' | 'default' | Taille du modal | | centered | boolean | false | Modal centré | | backdrop | boolean | true | Fermeture sur backdrop |

🚀 Fonctionnalités avancées

Responsive Design

Le système de grille utilise des breakpoints similaires à Bootstrap :

• xs : 0px et plus
• sm : 576px et plus
• md : 768px et plus
• lg : 992px et plus
• xl : 1200px et plus

Performance

• Utilisation de StyleSheet.create pour l'optimisation
• Composants optimisés avec React.memo quand approprié
• Gestion efficace des changements de thème

🧪 Tests

npm run test
# ou
yarn test

🔧 Développement

# Installation des dépendances
npm install

# Build
npm run build

# Watch mode
npm run watch

# Linting
npm run lint
npm run lint:fix

� Exemple Desktop

Un exemple complet d'application desktop est disponible dans le dossier example/BootstrapDesktopDemo/.

Fonctionnalités de l'exemple

• ✅ Tous les composants Bootstrap 5 démontrés
• ✅ Interface desktop optimisée
• ✅ Mode sombre/clair avec basculement
• ✅ Responsive design
• ✅ Support web (React Native Web)
• ✅ Support Electron (application native)

Démarrage rapide

# Accéder au dossier de l'exemple
cd example/BootstrapDesktopDemo

# Installer les dépendances
npm install

# Lancer en mode web
npm start
# Ouvre automatiquement http://localhost:3000

# Configurer Electron (optionnel)
./setup-electron.sh
npm run electron-dev

Structure de l'exemple

example/BootstrapDesktopDemo/
├── src/
│   ├── App.tsx          # Démo complète de tous les composants
│   └── index.tsx        # Point d'entrée React Native Web
├── public/
│   └── index.html       # Template HTML
├── electron.js          # Configuration Electron (optionnelle)
├── webpack.config.js    # Configuration Webpack
└── README.md           # Documentation de l'exemple

�📱 Compatibilité

• React Native : >= 0.60.0
• React : >= 16.8.0
• iOS : iOS 10+
• Android : API Level 21+
• Web : Supporté via React Native Web

🎯 Plateformes supportées

| Plateforme | Status | Version requise | |------------|--------|-----------------| | 📱 iOS | ✅ Supporté | React Native ≥ 0.60 | | 🤖 Android | ✅ Supporté | React Native ≥ 0.60 | | 🌐 Web | ✅ Supporté | React Native Web ≥ 0.17 | | 🖥️ Windows | ✅ Supporté | React Native Windows ≥ 0.68 | | 🍎 macOS | ✅ Supporté | React Native macOS ≥ 0.68 |

Configuration spécifique par plateforme

React Native Web

npm install react-native-web
# Aucune configuration supplémentaire requise

React Native Windows

npx react-native-windows-init --overwrite
# La librairie fonctionne out-of-the-box

React Native macOS

npx react-native-macos-init
# Support natif des composants

🎨 Thématisation

Pour une documentation complète sur le système de thème, consultez THEMING.md.

Exemple rapide

import { BootstrapProvider, useTheme } from '@whitemordred/react-native-bootstrap5';

const customTheme = {
  colors: {
    primary: '#ff5733',
    // Toutes les couleurs Bootstrap disponibles
  }
};

<BootstrapProvider theme={customTheme} mode="dark">
  <App />
</BootstrapProvider>

Utilitaires de couleur

import { TextUtility, BackgroundUtility, UtilityBox } from '@whitemordred/react-native-bootstrap5';

// Texte coloré
<TextUtility color="primary">Texte primary</TextUtility>
<TextUtility color="danger-emphasis">Danger emphasis</TextUtility>

// Fond coloré
<BackgroundUtility bg="success-subtle">
  Fond success subtle
</BackgroundUtility>

// Box utilitaire
<UtilityBox 
  bg="primary-subtle"
  border="primary"
  p={3}
  rounded
  shadow="sm"
>
  Contenu
</UtilityBox>

🤝 Contribution

Les contributions sont les bienvenues ! Veuillez lire le guide de contribution avant de soumettre une PR.

1. Fork le projet
2. Créez votre branche feature (git checkout -b feature/amazing-feature)
3. Committez vos changements (git commit -m 'Add amazing feature')
4. Push vers la branche (git push origin feature/amazing-feature)
5. Ouvrez une Pull Request

📄 License

MIT © WhiteMordred

🙏 Remerciements

• Bootstrap pour l'inspiration et les designs
• La communauté React Native pour les outils et librairies

Note : Cette librairie est en développement actif. N'hésitez pas à signaler des bugs ou proposer des améliorations via les issues GitHub.