React Native tutoriel PME : démarrer concrètement 2026

Lecture : 12 minutes · Niveau : intermédiaire · Mise à jour : avril 2026

React Native permet de produire des apps mobiles Android et iOS avec une seule codebase JavaScript / TypeScript et React. Ce tutoriel pratique amène un dev (ou une petite équipe PME) du zéro à une première app fonctionnelle : choix entre Expo et React Native CLI, premier projet, composants essentiels, navigation, gestion d’état, appel API, build et distribution.

L’écosystème React Native a beaucoup évolué ces dernières années. La nouvelle architecture (Fabric, JSI, TurboModules) a réglé les principaux goulots d’étranglement de performance qui historiquement faisaient préférer Flutter à certains. Côté outillage, Expo s’est imposé comme la voie royale pour démarrer rapidement, particulièrement pour les PME qui veulent éviter la configuration manuelle Xcode et Android Studio. Pour beaucoup d’équipes francophones avec un fond JavaScript / React web, React Native reste le choix le plus rationnel en 2026.

Ce tutoriel privilégie le chemin Expo car il représente la voie la plus directe pour la majorité des projets PME. Les concepts présentés sont applicables au CLI classique avec quelques adaptations mineures sur la chaîne de build.

Voir aussi → Application mobile pour PME : guide complet et Flutter vs React Native : comparatif détaillé.

Sommaire

Expo ou React Native CLI : choisir
Installation et premier projet
Composants de base
Style avec StyleSheet
Navigation avec React Navigation
Gestion d’état : useState, Context, Zustand
Appel API avec fetch et axios
Persistance avec AsyncStorage
Build APK et IPA via EAS Build
Mises à jour OTA avec Expo Updates
FAQ

1. Expo ou React Native CLI : choisir

Deux façons de démarrer un projet React Native :

Expo (recommandé pour démarrer) :
– Toolchain managée — pas besoin de toucher Xcode ou Android Studio pour démarrer
– Modules natifs courants déjà inclus (caméra, géolocalisation, notifications, etc.)
– Build cloud avec EAS Build (pas besoin de Mac local pour iOS)
– Mises à jour OTA gratuites pour patch instantané sans repasser par les stores
– Léger inconvénient : certaines libraires natives très spécifiques peuvent demander de quitter Expo (ce qui est plus rare aujourd’hui avec les Config Plugins)

React Native CLI :
– Contrôle total sur le projet natif
– Configuration manuelle de Xcode, Android Studio, signing
– Adapté aux projets avec besoins natifs très spécifiques ou équipes habituées au natif
– Plus complexe à démarrer mais plus flexible à long terme

Recommandation pour PME : démarrer avec Expo sauf raison spécifique. La majorité des apps métier n’a pas besoin de la flexibilité du CLI. Expo réduit drastiquement la friction de mise en route et de distribution.

2. Installation et premier projet

Pré-requis :
– Node.js 18+ installé (nodejs.org)
– Un éditeur (VS Code recommandé)
– App Expo Go sur le téléphone Android ou iOS (pour tester)

Créer un projet Expo :

npx create-expo-app mon-app
cd mon-app
npx expo start

npx expo start lance le serveur de développement. Un QR code s’affiche : le scanner avec l’app Expo Go pour voir l’app tourner sur le téléphone en quelques secondes.

Structure du projet Expo :

mon-app/
├── app/              # Routes (si Expo Router activé)
├── assets/           # Images, polices
├── components/       # Composants réutilisables
├── App.tsx           # Composant racine (template classique)
├── package.json      # Dépendances JS
└── app.json          # Configuration Expo (nom, icône, etc.)

3. Composants de base

import { View, Text, Image, ScrollView, Pressable } from 'react-native';

export default function App() {
  return (
    <ScrollView style={{ flex: 1, padding: 16 }}>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Bienvenue</Text>
      <Image
        source={{ uri: 'https://example.com/logo.png' }}
        style={{ width: 100, height: 100 }}
      />
      <Pressable
        onPress={() => alert('Cliqué')}
        style={{ padding: 12, backgroundColor: '#007AFF', borderRadius: 8 }}
      >
        <Text style={{ color: '#fff', textAlign: 'center' }}>Cliquer</Text>
      </Pressable>
    </ScrollView>
  );
}

Composants essentiels :
– View : conteneur (équivalent div)
– Text : tout le texte doit être dans Text
– Image : affichage d’images
– ScrollView : scroll vertical/horizontal
– FlatList, SectionList : listes performantes (lazy rendering)
– TextInput : champ de saisie
– Pressable, TouchableOpacity : zones cliquables
– Modal : modale en surimpression

4. Style avec StyleSheet

React Native utilise un sous-ensemble de CSS adapté (camelCase, valeurs sans unités). Le pattern recommandé :

import { StyleSheet, View, Text } from 'react-native';

export default function Card({ titre }: { titre: string }) {
  return (
    <View style={styles.card}>
      <Text style={styles.titre}>{titre}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 12,
    marginBottom: 12,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2, // Android shadow
  },
  titre: {
    fontSize: 18,
    fontWeight: '600',
  },
});

Layout : Flexbox uniquement. flex: 1, flexDirection: 'row', justifyContent, alignItems. Pas de Grid.

Alternatives populaires :
– NativeWind : Tailwind CSS pour React Native (productivité énorme)
– styled-components : si vous venez de l’écosystème React web

npx expo install @react-navigation/native @react-navigation/native-stack

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function Accueil({ navigation }) {
  return (
    <View>
      <Text>Accueil</Text>
      <Pressable onPress={() => navigation.navigate('Detail', { id: 42 })}>
        <Text>Voir détail</Text>
      </Pressable>
    </View>
  );
}

function Detail({ route }) {
  return <Text>Détail de l'item {route.params.id}</Text>;
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Accueil" component={Accueil} />
        <Stack.Screen name="Detail" component={Detail} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Variantes de navigateurs :
– Stack : pile d’écrans (push/pop) — pour les flux séquentiels
– Bottom Tabs : barre d’onglets en bas — pour les sections principales de l’app
– Drawer : menu latéral — pour les apps avec beaucoup de sections

Alternative moderne : Expo Router (file-based routing inspiré de Next.js). Particulièrement adapté pour les nouveaux projets Expo.

6. Gestion d’état : useState, Context, Zustand

État local : useState

const [compteur, setCompteur] = useState(0);
return (
  <Pressable onPress={() => setCompteur(compteur + 1)}>
    <Text>Compteur : {compteur}</Text>
  </Pressable>
);

État partagé léger : Context API

const PanierContext = createContext({ items: [], ajouter: (i) => {} });

function PanierProvider({ children }) {
  const [items, setItems] = useState([]);
  const ajouter = (item) => setItems([...items, item]);
  return (
    <PanierContext.Provider value={{ items, ajouter }}>
      {children}
    </PanierContext.Provider>
  );
}

État global complexe : Zustand

Plus simple que Redux, suffisant pour 90% des cas :

npm install zustand

import { create } from 'zustand';

const usePanier = create((set) => ({
  items: [],
  ajouter: (item) => set((state) => ({ items: [...state.items, item] })),
  vider: () => set({ items: [] }),
}));

// Utilisation
const items = usePanier((s) => s.items);
const ajouter = usePanier((s) => s.ajouter);

Pour des apps très complexes : Redux Toolkit ou Jotai.

7. Appel API avec fetch et axios

Avec fetch (natif) :

async function chargerProduits() {
  const res = await fetch('https://api.example.com/produits');
  if (!res.ok) throw new Error('Erreur réseau');
  return res.json();
}

Avec axios (plus de fonctionnalités) :

npm install axios

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

api.interceptors.request.use(async (config) => {
  const token = await AsyncStorage.getItem('auth_token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

TanStack Query (recommandé pour la gestion serveur-state) :

npm install @tanstack/react-query

const { data, isLoading, error } = useQuery({
  queryKey: ['produits'],
  queryFn: chargerProduits,
});

TanStack Query gère cache, refetch, retry, deduplication. Énorme gain de simplicité sur des apps avec beaucoup d’appels API.

8. Persistance avec AsyncStorage

npx expo install @react-native-async-storage/async-storage

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

await AsyncStorage.setItem('auth_token', 'abc123');
const token = await AsyncStorage.getItem('auth_token');
await AsyncStorage.removeItem('auth_token');

Pour des données structurées plus volumineuses : MMKV (très rapide) ou expo-sqlite (SQLite local).

Sécurité : AsyncStorage n’est pas chiffré par défaut. Pour stocker des données sensibles (token long terme, données médicales), utiliser expo-secure-store qui exploite Keychain (iOS) et Keystore (Android).

9. Build APK et IPA via EAS Build

EAS (Expo Application Services) est la solution officielle pour builder les apps Expo dans le cloud. Pas besoin de Mac local pour iOS.

Setup :

npm install -g eas-cli
eas login
eas build:configure

Cela crée un eas.json avec les profils de build (development, preview, production).

Build Android :

eas build --platform android --profile production

Build iOS :

eas build --platform ios --profile production

EAS Build se charge de la signature, de la compilation, et fournit un lien de téléchargement de l’AAB / IPA quand c’est prêt (15-30 min selon la queue).

Soumission aux stores :

eas submit --platform android
eas submit --platform ios

EAS Submit pousse automatiquement vers Play Console et App Store Connect.

Plan tarifaire : EAS a un plan gratuit limité (utile pour démarrer) et des plans payants pour des builds illimités. Voir expo.dev pour les tarifs actuels.

10. Mises à jour OTA avec Expo Updates

L’un des grands avantages d’Expo : patcher l’app sans repasser par les stores. Idéal pour corriger un bug critique en quelques minutes.

npx expo install expo-updates
eas update --branch production --message "Fix bug paiement"

L’app récupère la mise à jour au prochain démarrage. Limite : seul le code JavaScript est mis à jour. Si on a modifié du code natif (ajout d’une lib avec module natif), un nouveau build store est nécessaire.

Bonnes pratiques :
– Tester chaque OTA en interne avant de pousser en production
– Garder une stratégie de rollback (eas update –rollback)
– Communiquer aux utilisateurs les changements majeurs même en OTA

FAQ

Faut-il connaître React web pour faire du React Native ?

Recommandé fortement. Les concepts de composants, props, state, hooks sont identiques. La différence principale est la plateforme cible et les composants disponibles (View au lieu de div, etc.). Un dev React web peut être productif en React Native en 1-2 semaines.

Expo limite-t-il les fonctionnalités de l’app ?

Beaucoup moins qu’avant. Avec les Config Plugins et le mode CNG (Continuous Native Generation), Expo couvre la quasi-totalité des cas d’usage. Pour des libs natives très spécifiques non disponibles en Expo, le « prebuild » génère le code natif modifiable. Quitter Expo complètement est rarement nécessaire aujourd’hui.

React Native ou Flutter, lequel a plus de jobs en Afrique de l’Ouest ?

Le marché penche légèrement vers React Native dans les hubs tech francophones (Dakar, Abidjan, Cotonou) car beaucoup de devs viennent du JavaScript/React web. Flutter progresse rapidement. Les deux écosystèmes sont employables. Voir Flutter vs React Native : comparatif détaillé.

Comment intégrer le mobile money en React Native ?

Via les SDK ou API REST des agrégateurs (PayDunya, CinetPay, Wave, Hub2). Quasi tous proposent un SDK JavaScript ou une intégration via WebView. Utiliser react-native-webview pour intégrer une page de paiement hébergée par l’agrégateur reste l’approche la plus simple et la plus sûre.

Mon app Expo est-elle plus lente qu’une app pure React Native CLI ?

Non, pas en pratique. Expo ajoute une légère couche d’overhead pour les modules pré-inclus, mais l’impact est négligeable pour la majorité des apps. Les optimisations (Hermes activé par défaut, builds optimisés EAS) compensent largement.

Combien de temps pour publier une app React Native sur le Play Store ?

Une fois EAS Build configuré : eas build puis eas submit prend environ 30-60 minutes pour le build + upload. Le délai de validation Google : généralement quelques heures à quelques jours pour une nouvelle app, plus rapide pour les mises à jour.

Comment gérer les notifications push en React Native ?

Avec Expo : expo-notifications couvre la quasi-totalité du besoin. Un service tiers comme Firebase Cloud Messaging ou OneSignal facilite l’envoi en masse. Côté iOS, configurer les certificats APNs via le compte développeur Apple. Côté Android, FCM est intégré nativement.

Articles liés (cluster Mobile)

Voir aussi : React frontend pro pour PME si vous venez du web React, Node.js backend pour PME pour le backend de l’app.

Article mis à jour le 25 avril 2026. Pour signaler une erreur ou suggérer une amélioration, écrivez-nous.