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

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

🎯 Utilisation de base

1import React from 'react';
2import { BootstrapProvider, Button, Container } from '@whitemordred/react-native-bootstrap5';
3
4const customTheme = {
5  colors: {
6    primary: '#ff5733',
7    dark: {
8      background: '#121212',
9      text: '#ffffff'
10    },
11  }
12};
13
14export default function App() {
15  return (
16    <BootstrapProvider theme={customTheme} mode="dark">
17      <Container>
18        <Button variant="primary">Cliquez-moi</Button>
19      </Container>
20    </BootstrapProvider>
21  );
22}

🧩 Composants disponibles

Boutons

1import { Button } from '@whitemordred/react-native-bootstrap5';
2
3// Toutes les variantes Bootstrap 5
4<Button variant="primary">Primary</Button>
5<Button variant="secondary">Secondary</Button>
6<Button variant="success">Success</Button>
7<Button variant="danger">Danger</Button>
8<Button variant="warning">Warning</Button>
9<Button variant="info">Info</Button>
10<Button variant="light">Light</Button>
11<Button variant="dark">Dark</Button>
12<Button variant="link">Link</Button>
13
14// Couleurs étendues
15<Button variant="indigo">Indigo</Button>
16<Button variant="purple">Purple</Button>
17<Button variant="pink">Pink</Button>
18<Button variant="orange">Orange</Button>
19<Button variant="teal">Teal</Button>
20<Button variant="cyan">Cyan</Button>
21
22// Variantes outline (toutes disponibles)
23<Button variant="outline-primary">Outline Primary</Button>
24<Button variant="outline-indigo">Outline Indigo</Button>
25
26// Options avancées
27<Button pill>Pill Button</Button>
28<Button gradient>Gradient</Button>
29<Button active>Active State</Button>
30
31// Tailles
32<Button size="sm">Small</Button>
33<Button size="default">Default</Button>
34<Button size="lg">Large</Button>
35
36// Block button
37<Button block>Block Button</Button>
38
39// États
40<Button disabled>Disabled</Button>
41<Button loading>Loading...</Button>

Cards

1import { 
2  Card, 
3  CardHeader, 
4  CardBody, 
5  CardFooter, 
6  CardTitle, 
7  CardText,
8  CardImage 
9} from '@whitemordred/react-native-bootstrap5';
10
11<Card>
12  <CardImage source={{ uri: 'https://example.com/image.jpg' }} top />
13  <CardHeader>En-tête de la card</CardHeader>
14  <CardBody>
15    <CardTitle>Titre de la card</CardTitle>
16    <CardText>
17      Texte du contenu de la card avec des informations utiles.
18    </CardText>
19    <Button variant="primary">Action</Button>
20  </CardBody>
21  <CardFooter>
22    Pied de page de la card
23  </CardFooter>
24</Card>

Système de grille

1import { Container, Row, Col } from '@whitemordred/react-native-bootstrap5';
2
3<Container fluid>
4  <Row>
5    <Col xs={12} sm={6} md={4}>
6      Colonne 1
7    </Col>
8    <Col xs={12} sm={6} md={4}>
9      Colonne 2
10    </Col>
11    <Col xs={12} sm={12} md={4}>
12      Colonne 3
13    </Col>
14  </Row>
15</Container>

Modals

1import { 
2  Modal, 
3  ModalHeader, 
4  ModalBody, 
5  ModalFooter 
6} from '@whitemordred/react-native-bootstrap5';
7
8const [visible, setVisible] = useState(false);
9
10<Modal 
11  visible={visible} 
12  onClose={() => setVisible(false)}
13  size="lg"
14  centered
15>
16  <ModalHeader onClose={() => setVisible(false)}>
17    Titre du modal
18  </ModalHeader>
19  <ModalBody>
20    Contenu du modal
21  </ModalBody>
22  <ModalFooter>
23    <Button variant="secondary" onPress={() => setVisible(false)}>
24      Annuler
25    </Button>
26    <Button variant="primary" onPress={() => setVisible(false)}>
27      Sauvegarder
28    </Button>
29  </ModalFooter>
30</Modal>

Formulaires

1import { 
2  FormGroup, 
3  FormLabel, 
4  FormControl, 
5  FormText, 
6  InvalidFeedback 
7} from '@whitemordred/react-native-bootstrap5';
8
9<FormGroup>
10  <FormLabel required>Nom</FormLabel>
11  <FormControl
12    placeholder="Entrez votre nom"
13    value={name}
14    onChangeText={setName}
15    isInvalid={!!errors.name}
16  />
17  {errors.name && (
18    <InvalidFeedback>{errors.name}</InvalidFeedback>
19  )}
20  <FormText muted>Votre nom complet</FormText>
21</FormGroup>

🎨 Gestion des thèmes

BootstrapProvider

Le composant BootstrapProvider doit envelopper votre application :

1import { BootstrapProvider } from '@whitemordred/react-native-bootstrap5';
2
3<BootstrapProvider 
4  theme={customTheme} 
5  mode="light" // 'light' | 'dark'
6  followSystemTheme={true} // suit le thème système
7>
8  <App />
9</BootstrapProvider>

Hook useTheme

1import { useTheme } from '@whitemordred/react-native-bootstrap5';
2
3function MyComponent() {
4  const { theme, mode, setMode, toggleMode, currentColors } = useTheme();
5
6  return (
7    <View style={{ backgroundColor: currentColors.background }}>
8      <Button onPress={toggleMode}>
9        Mode actuel: {mode}
10      </Button>
11    </View>
12  );
13}

Personnalisation du thème

1const customTheme = {
2  colors: {
3    primary: '#ff5733',
4    secondary: '#6c757d',
5    success: '#28a745',
6    // ... autres couleurs
7  },
8  darkColors: {
9    background: '#121212',
10    surface: '#1e1e1e',
11    text: '#ffffff',
12    primary: '#ff7961',
13    // ... autres couleurs pour le mode sombre
14  },
15  spacing: {
16    0: 0,
17    1: 4,
18    2: 8,
19    3: 16,
20    4: 24,
21    5: 48,
22  },
23  typography: {
24    fontSizes: {
25      xs: 12,
26      sm: 14,
27      base: 16,
28      lg: 18,
29      xl: 20,
30      '2xl': 24,
31    },
32    fontWeights: {
33      light: '300',
34      normal: '400',
35      medium: '500',
36      semibold: '600',
37      bold: '700',
38    },
39  },
40  borderRadius: {
41    none: 0,
42    sm: 2,
43    base: 4,
44    md: 6,
45    lg: 8,
46    xl: 12,
47    full: 9999,
48  },
49  shadows: {
50    sm: {
51      shadowColor: '#000',
52      shadowOffset: { width: 0, height: 1 },
53      shadowOpacity: 0.05,
54      shadowRadius: 2,
55      elevation: 2,
56    },
57    // ... autres ombres
58  },
59};

🎯 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

1npm run test
2# ou
3yarn test

🔧 Développement

1# Installation des dépendances
2npm install
3
4# Build
5npm run build
6
7# Watch mode
8npm run watch
9
10# Linting
11npm run lint
12npm 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

1# Accéder au dossier de l'exemple
2cd example/BootstrapDesktopDemo
3
4# Installer les dépendances
5npm install
6
7# Lancer en mode web
8npm start
9# Ouvre automatiquement http://localhost:3000
10
11# Configurer Electron (optionnel)
12./setup-electron.sh
13npm 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

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

React Native Windows

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

React Native macOS

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

🎨 Thématisation

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

Exemple rapide

1import { BootstrapProvider, useTheme } from '@whitemordred/react-native-bootstrap5';
2
3const customTheme = {
4  colors: {
5    primary: '#ff5733',
6    // Toutes les couleurs Bootstrap disponibles
7  }
8};
9
10<BootstrapProvider theme={customTheme} mode="dark">
11  <App />
12</BootstrapProvider>

Utilitaires de couleur

1import { TextUtility, BackgroundUtility, UtilityBox } from '@whitemordred/react-native-bootstrap5';
2
3// Texte coloré
4<TextUtility color="primary">Texte primary</TextUtility>
5<TextUtility color="danger-emphasis">Danger emphasis</TextUtility>
6
7// Fond coloré
8<BackgroundUtility bg="success-subtle">
9  Fond success subtle
10</BackgroundUtility>
11
12// Box utilitaire
13<UtilityBox 
14  bg="primary-subtle"
15  border="primary"
16  p={3}
17  rounded
18  shadow="sm"
19>
20  Contenu
21</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.