Expo - Expo (Framework Universel pour React Native)

1. Définition détaillée & Contexte d'émergence

Expo est devenu le framework officiel recommandé par l'équipe Meta pour développer avec React Native. Grâce à la Continuous Native Generation (CNG via `npx expo prebuild`), Expo permet de maintenir un code 100% JavaScript/TypeScript sans jamais commiter de dossiers natifs `ios/` ou `android/` fragiles. La suite EAS (Expo Application Services) fournit le cloud build (EAS Build), la soumission automatique sur les stores (EAS Submit) et le déploiement de correctifs over-the-air sans repasser par la validation des stores (EAS Update).

2. Piliers de l’Écosystème Expo Moderne

L'époque de l'ancien 'Managed Workflow fermé' est révolue : Expo moderne supporte n'importe quelle bibliothèque native grâce aux Config Plugins.

3. Caractéristiques fondamentales

• Expo Go : test instantané sur smartphone physique via QR code sans compilation native.
• Expo Router : navigation native file-based avec typage strict des routes.
• EAS Update : déploiement immédiat de mises à jour de code JS sans repasser par la revue des stores.
• Modules natifs de pointe : caméra, localisation, capteurs, notifications push, audio, haptics.
• Support complet de l’architecture moderne de React Native (Hermes, Fabric, TurboModules).

import { View, Text, StyleSheet, Pressable } from 'react-native';
import * as Haptics from 'expo-haptics';
import { useRouter } from 'expo-router';

export default function HomeScreen() {
  const router = useRouter();

  const handlePress = async () => {
    // Retour haptique natif sur iPhone et Android
    await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
    router.push('/details');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Bienvenue sur Coderoe Mobile</Text>
      <Pressable style={styles.button} onPress={handlePress}>
        <Text style={styles.buttonText}>Voir les détails</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' },
  title: { fontSize: 22, fontWeight: '700', marginBottom: 20 },
  button: { backgroundColor: '#000', paddingHorizontal: 24, paddingVertical: 12, borderRadius: 12 },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
});

5. Avantages et limites techniques

6. Recommandations : Quand l'utiliser ?

8. Sources officielles vérifiées

Données techniques vérifiées auprès des documentations officielles, des RFCs et des spécifications standards.