Styling et Flexbox en React Native 🎨

En React Native, pas de CSS ! Tout se fait avec StyleSheet et Flexbox (le système de layout). C'est comme du CSS mais en JavaScript, et encore plus puissant !

1. StyleSheet.create() — la base 🎯

' StyleSheet.create() = l'équivalent de CSS en JavaScript
' ⚠️ Pas de classes CSS, pas de selecteurs, pas d'héritage
' Chaque propriété est en camelCase (pas de kebab-case)

' CSS → React Native :
' background-color → backgroundColor
' font-size → fontSize
' border-radius → borderRadius
' text-align → textAlign
``'

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

// StyleSheet = style "optimisé"
// Meilleure performance que les objets inline
const styles = StyleSheet.create({
  boite: {
    backgroundColor: "blue",
    padding: 16,
    borderRadius: 8,
  },
  texte: {
    color: "white",
    fontSize: 18,
    fontWeight: "bold",
  },
});
``'

---

## 2. Flexbox — tout le layout repose dessus 📐

text
' Flexbox en React Native = CSS Flexbox mais adapté
' ⚡ C'est LE système de layout, pas une option !

' flexDirection : comment les enfants s'alignent
'   column (défaut) : empilement vertical
'   row : alignement horizontal

' justifyContent : alignement sur l'axe principal
'   flex-start, center, flex-end, space-between

' alignItems : alignement sur l'axe secondaire
'   stretch (défaut), center, flex-start, flex-end

' flex = proportion d'espace que prend un élément
'   flex: 1 → prend tout l'espace disponible
'   flex: 2 → prend 2× plus qu'un flex: 1
``'

---

## 3. Exemple concret : mise en page d'une app 📱

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

function EcranAccueil() {
  return (
    <View style={styles.container}>
      {/* En-tête */}
      <View style={styles.header}>
        <Text style={styles.titre}>Mon App</Text>
        <Text style={styles.sousTitre}>Bienvenue !</Text>
      </View>

      {/* Corps principal - prend tout l'espace */}
      <View style={styles.corps}>
        <View style={styles.carte}>
          <Text style={styles.carteTitre}>Carte 1</Text>
        </View>
        <View style={styles.carte}>
          <Text style={styles.carteTitre}>Carte 2</Text>
        </View>
      </View>

      {/* Barre de navigation en bas */}
      <View style={styles.footer}>
        <Text style={styles.footerTexte}>Accueil</Text>
        <Text style={styles.footerTexte}>Profil</Text>
        <Text style={styles.footerTexte}>Paramètres</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,               // Prend tout l'écran
    backgroundColor: "#f5f5f5",
  },
  header: {
    backgroundColor: "#6200ee",
    padding: 24,
    paddingTop: 60,        // Safe area iOS
  },
  titre: { color: "#fff", fontSize: 28, fontWeight: "bold" },
  sousTitre: { color: "rgba(255,255,255,0.8)", fontSize: 16, marginTop: 4 },
  corps: {
    flex: 1,              // Prend tout l'espace restant
    flexDirection: "row", // Côte à côte
    justifyContent: "center",
    alignItems: "center",
    gap: 16,              // Espacement
    padding: 16,
  },
  carte: {
    flex: 1,              // 50/50 entre les deux cartes
    backgroundColor: "#fff",
    borderRadius: 12,
    padding: 20,
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  footer: {
    flexDirection: "row",
    justifyContent: "space-around",
    padding: 16,
    backgroundColor: "#fff",
    borderTopWidth: 1,
    borderColor: "#eee",
  },
});
``'

---

## 4. Dimensions responsives 📏

```tsx
import { Dimensions, useWindowDimensions, StyleSheet, View, Text } from "react-native";

// Méthode 1 : Dimensions (statique)
const { width, height } = Dimensions.get("window");

// Méthode 2 : useWindowDimensions (réactive, se met à jour) ✅
function EcranAdaptatif() {
  const { width, height } = useWindowDimensions();
  const estPaysage = width > height;

  return (
    <View style={[styles.container, estPaysage && styles.paysage]}>
      <Text>
        Largeur : {width}px | Hauteur : {height}px
        {"\n"}Mode : {estPaysage ? "🌅 Paysage" : "📱 Portrait"}
      </Text>
    </View>
  );
}
``'

---

## 5. NativeWind (Tailwind pour RN) 💨

```tsx
// NativeWind = écrire du Tailwind en React Native
// Installation : npx expo install nativewind

// Au lieu de StyleSheet.create() :
{
  /* <View className="flex-1 bg-gray-100 p-4">
  <Text className="text-2xl font-bold text-purple-600">
    Hello NativeWind !
  </Text>
</View> */
}

// Avantages :
// • Plus rapide à écrire
// • Mêmes classes que Tailwind web
// • Dark mode facile
// • Pas besoin de nommer les styles
``'

---

## Exercices pour toi 🎯

1. **Page profil** : crée un écran avec une photo ronde (borderRadius: 50), un nom centré, et 3 statistiques côte à côte (abonnés, abonnements, publications)
2. **Grille responsive** : affiche une grille 2×2 de cartes avec flexWrap: "wrap" et 50% de largeur chacune
3. **Adaptation** : utilise useWindowDimensions pour changer le layout entre portrait (colonne) et paysage (ligne)