React Native dans le développement mobile : ce que c'est, concepts clés et fonctionnement

Bases (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — extension syntaxique de JavaScript pour décrire l'UI. Ressemble à HTML mais fonctionne via React.createElement(). Expressions JSX : {variable}, {condition && <View />}, {array.map()}. Functional Component — une fonction qui retourne du JSX. Accepte les props comme argument. Standard moderne de React (avant React 16.8, les Class Components étaient utilisés). Hooks — fonctions pour accéder à l'état et au cycle de vie depuis Functional Component. Règles des Hooks : seulement au niveau supérieur, seulement dans Functional Components.

Référence des Hooks

useState — état local. useEffect — effets de bord. useContext — accès au Context. useRef — ref muable. useCallback — mémoïsation de fonction. useMemo — mémoïsation de valeur. Custom Hooks — logique réutilisable : function useDebounce(value, delay).

// Functional Component avec hooks dans React Native
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Hooks (useState, useEffect, useRef, useCallback, useMemo)

useState — retourne [value, setValue]. setValue — remplace (ne fusionne pas comme setState dans Class). Pour les objets : setUser(prev => ({ ...prev, name: 'New' })). useEffect — s'exécute après le rendu. Tableau de dépendances : [] — une fois (montage), [dep] — quand dep change, undefined — chaque rendu. Fonction de nettoyage — return () => {}. useContext — const value = useContext(MyContext). Nécessite Context.Provider plus haut dans l'arbre.

useRef — objet muable qui persiste la valeur entre les rendus. .current — mutation. Utilisé pour : accès aux éléments natifs (ref={inputRef}), stockage des valeurs précédentes, minuteries. useCallback — retourne une fonction mémoïsée. const handlePress = useCallback(() => {}, [dep]). useMemo — retourne une valeur mémoïsée. const sorted = useMemo(() => data.sort(), [data]). Utilisez useMemo pour les calculs coûteux.

useState — pour l'état simple. useEffect — pour les appels API et abonnements. useCallback/useMemo — pour l'optimisation. IT Sectr recommande de ne pas tout mémoïser — seulement en cas de réels problèmes de performance.

Custom Hooks

Custom Hook — une fonction qui utilise des hooks intégrés. Le nom commence par use*. Exemples : useDebounce, useNetworkStatus, useAppState, useKeyboard. Les Custom Hooks sont le principal moyen de réutiliser la logique dans React Native. IT Sectr recommande d'extraire la logique métier dans des Custom Hooks et de garder les composants propres (JSX + styles seulement).

Composants (View, Text, FlatList, ScrollView, SafeAreaView)

View — conteneur de base (analogue à div). Text — texte (seul composant pour le texte). TextInput — saisie de texte. ScrollView — conteneur défilable. FlatList — liste virtualisée pour grandes données. SectionList — FlatList avec sections. SafeAreaView — remplissage automatique de la Safe Area (encoche, barre d'état). Pressable — remplacement moderne de TouchableOpacity. useColorScheme — détection du thème sombre/clair.

Optimisation de FlatList

FlatList — virtualisation : seuls les éléments visibles + windowSize sont rendus. Optimisation : 1) keyExtractor — clé unique, 2) getItemLayout — hauteur fixe (ignore la mesure onLayout), 3) React.memo pour renderItem, 4) maxToRenderPerBatch (par défaut 10), 5) windowSize (par défaut 21), 6) removeClippedSubviews, 7) initialNumToRender.

Navigation dans React Native

React Navigation — pile de navigation standard. NativeStackNavigator — animation native (push/pop). TabNavigator — onglets inférieurs. DrawerNavigator — menu latéral. NavigationContainer — composant racine de navigation. Deep linking — configuration de liens pour liens externes. Flux d'authentification — navigation conditionnelle : isAuth ? AppStack : AuthStack. IT Sectr recommande NativeStackNavigator pour les écrans principaux et TabNavigator pour la navigation de premier niveau.

Styles (StyleSheet)

StyleSheet.create() — création de styles. Toutes les propriétés en camelCase : backgroundColor, fontSize, marginTop. Flexbox — modèle de disposition par défaut (flexDirection: 'column'). Pas de cascade CSS, pas d'héritage, pas de sélecteurs. Inline styles — fonctionnent mais déconseillés. StyleSheet.compose() — combinaison de styles. Platform.select — styles par plateforme : Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — gestion des insets de safe area.

Styled Components et CSS-in-JS

Styled Components — bibliothèque pour CSS-in-JS dans React Native. Restyle — thémisation + styles responsifs. NativeWind — Tailwind CSS pour React Native. Unistyles — styles rapides avec CSS atomique. Mode sombre — useColorScheme + styles dynamiques. IT Sectr recommande StyleSheet.create pour la simplicité et NativeWind pour les projets avec système de design.

Animation (Animated API)

Animated API — animation déclarative. Animated.Value — valeur d'animation. Animated.timing — animation simple. Animated.spring — animation à ressort. Animated.View — View animable. useNativeDriver — animation sur le thread natif (transform, opacity — supportés). Animated.loop — animation en boucle. LayoutAnimation — animation automatique lors du changement de layout. reanimated 2/3 (bibliothèque) — alternative plus performante. Metro Bundler — bundler JavaScript. Regroupe JS + assets dans un bundle. Prend en charge Fast Refresh (Hot Reload). Hermes — moteur JS optimisé pour mobile : démarrage rapide, moins de mémoire. Par défaut depuis RN 0.70+.

Gesture Handler et animations

React Native Gesture Handler — traitement natif des gestes. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — API déclarative des gestes. Reanimated + Gesture Handler — combinaison pour des animations à 60fps avec gestes. react-native-skia — rendu GPU pour graphiques 2D complexes. IT Sectr recommande Reanimated 3 pour toutes les animations plus performantes que Animated API.

Réseau (fetch, AsyncStorage, API)

fetch — client HTTP intégré. Prend en charge GET, POST, headers, body. Axios — bibliothèque populaire avec intercepeurs. AsyncStorage — stockage clé-valeur (similaire à UserDefaults). MMKV — alternative rapide à AsyncStorage de WeChat. react-native-keychain — stockage sécurisé de tokens. React Query (TanStack Query) — gestion d'état serveur : mise en cache, revalidation, pagination. IT Sectr recommande React Query pour les requêtes API et MMKV pour le stockage local.

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native Modules et Turbo Modules

Native Module — pont entre JS et code natif (Java/Kotlin pour Android, ObjC/Swift pour iOS). Permet d'appeler des API natives depuis JS. Turbo Modules (New Architecture) — remplacement des anciens Native Modules. Appel synchrone, typage via Codegen, moins de surcharge. Fabric Renderer — nouveau moteur de rendu avec layout synchrone. JSI (JavaScript Interface) — accès direct de JS aux objets natifs sans pont. IT Sectr recommande Turbo Modules pour les nouveaux projets et Native Modules pour les existants.

// Module natif Android (Kotlin)
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

Tests (Jest, React Native Testing Library)

Jest — exécuteur de tests standard. describe/it/expect. React Native Testing Library — tests de composants. render, fireEvent, waitFor. screen.getByText, getByTestId — recherche. userEvent — simulation d'actions. Tests Snapshot — toMatchSnapshot(). MSW (Mock Service Worker) — simulation d'API. Detox — tests E2E pour RN (grey-box, natif). IT Sectr recommande React Native Testing Library pour les composants et Detox pour les scénarios de bout en bout.

CodePush (App Center) — mises à jour OTA du bundle JS sans publication sur l'App Store/Google Play. Utilisé pour : correctifs urgents, tests A/B, modifications de contenu. Limitations : ne peut pas modifier le code natif. Alternatives : EAS Update (Expo), react-native-update. IT Sectr recommande CodePush pour les correctifs urgents et EAS Update pour les projets Expo.

Expo — framework pour React Native. Managed workflow — toutes les configurations via app.json. Development builds — modules natifs personnalisés sans eject. Expo SDK — modules intégrés : appareil photo, biométrie, notifications. EAS Build — compilation cloud. Expo Router — routage basé sur les fichiers (similaire à Next.js). IT Sectr recommande Expo pour les nouveaux projets et bare RN pour les projets avec personnalisation native profonde.