Premiers pas React Native affiche de vrais composants natifs iOS et Android, écrits en JavaScript ou TypeScript. Expo est le point de départ recommandé : create-expo-app, expo start, puis Expo Go. Un composant est une fonction en PascalCase qui renvoie du JSX et qu'on exporte. View organise, Text est le seul endroit où l'on écrit du texte. Dans le JSX : accolades pour les expressions, un seul élément racine. export default function App () { return ( <View > <Text > Bonjour { prenom}< /Text> </View > ); } À retenir : Tout texte vit dans un <Text>.
Styles & Flexbox Le style est un objet en camelCase ; les tailles sont des nombres sans unité. StyleSheet.create range les styles ; un tableau de styles les combine, le dernier gagne. Pas de cascade : chaque composant a ses propres styles. flexDirection vaut column par défaut ; justifyContent = axe principal, alignItems = axe secondaire. flex partage l'espace en proportions ; useWindowDimensions suit la taille de l'écran. ecran: { flex: 1 , justifyContent: 'center' , alignItems: 'center' , } À retenir : Centrer = flex: 1 + justifyContent + alignItems.
Composants de base Image distante : source={{ uri }} avec width et height obligatoires. ImageBackground pour du contenu par-dessus une image. ScrollView fait défiler, mais rend tout son contenu : réserve-le aux contenus courts. Pressable + onPress pour tout bouton ; style fonction de pressed pour le retour visuel. Zone tactile d'au moins 44 à 48 points, agrandie au besoin avec hitSlop. <Pressable onPress ={ valider} style ={({ pressed }) => [ styles. bouton, pressed && styles. enfonce]} > <Text > Valider</Text > </Pressable > À retenir : Sur mobile, on n'onClick pas : on onPress.
État & interactions Les props configurent un composant et sont en lecture seule ; children contient ce qui est entre les balises. useState renvoie [valeur, setValeur] ; appeler le setter relance le rendu. Quand la nouvelle valeur dépend de l'ancienne : setN((p) => p + 1). Objets et tableaux : on crée une copie, on ne modifie jamais l'original. TextInput contrôlé : value + onChangeText, et le bon keyboardType. const [ texte, setTexte] = useState ( '' ); <TextInput value ={ texte} onChangeText ={ setTexte} /> À retenir : Le state est la source de vérité, l'écran n'est que son reflet.
Listes map transforme un tableau en composants ; chaque élément reçoit une key stable. L'index n'est pas une bonne key si la liste change d'ordre. FlatList virtualise : data, renderItem, keyExtractor. Accessoires utiles : ListEmptyComponent, numColumns, onEndReached, onRefresh. Ajouter avec [...liste, x], supprimer avec filter, modifier avec map. <FlatList data ={ items} keyExtractor ={( item) => item. id} renderItem ={({ item }) => <Ligne item ={ item} /> } /> À retenir : Nouveau tableau = nouvelle référence = écran à jour.
Effets & données useEffect synchronise avec l'extérieur ; le tableau de dépendances décide quand il se relance. Toujours nettoyer minuteurs et abonnements dans la fonction renvoyée. Pas de fonction async directement dans useEffect : déclare-la à l'intérieur. Un chargement a trois états : chargement, données, erreur. fetch ne rejette pas sur un 404. AsyncStorage pour les préférences (en JSON), expo-secure-store pour les secrets. useEffect (() => { const id = setInterval ( tick, 1000 ); return () => clearInterval ( id); }, []); À retenir : Rendu pur, effets à part, nettoyage systématique.
Navigation Expo Router : chaque fichier de app/ est un écran, son chemin est son URL. [id].tsx crée une route dynamique, lue avec useLocalSearchParams. _layout.tsx choisit le navigateur : Stack pour empiler, Tabs pour les onglets. Les dossiers entre parenthèses groupent sans changer l'URL. Platform.OS / Platform.select et les zones sûres adaptent l'app à chaque appareil. import { Link, router } from 'expo-router' ; <Link href = "/profil" > Profil</Link > router. push ( '/produit/42' ); À retenir : Un fichier, un écran, une URL.
Vers la production Animated.timing + useNativeDriver pour opacity et transform ; Reanimated pour les animations riches. React.memo, useCallback et le React Compiler évitent les rendus inutiles. Mesure avant d'optimiser. FlatList bien configurée et expo-image pour des écrans fluides. EAS Build compile, EAS Submit publie, EAS Update corrige le JavaScript à distance. Avant publication : identifiants, icônes, permissions, tests sur appareils réels. Animated. timing ( valeur, { toValue: 1 , duration: 400 , useNativeDriver: true , }). start (); À retenir : 60 images par seconde : 16 ms par image, pas une de plus.
