// Mobile

React Native : débuter le développement mobile

Par Kévin Papot · publié le 6 mars 2026

React Native est le framework mobile créé par Meta (l’entreprise derrière Facebook et Instagram). Son idée est directe : écrire une application en JavaScript ou TypeScript, avec la logique de composants héritée de React, et laisser le framework produire une véritable interface native sur iOS comme sur Android. Vous ne fabriquez pas une page web déguisée en application : à l’écran, ce sont de vrais composants du système. Ce guide vous accompagne pour apprendre React Native pas à pas, du premier projet jusqu’à la publication.

Le concept : un seul code, deux plateformes

Développer nativement signifie normalement écrire deux applications : une en Swift ou Objective-C pour iOS, une en Kotlin ou Java pour Android. Deux langages, deux équipes, deux fois le travail. React Native change la donne : vous écrivez une base de code en JavaScript, et le framework la connecte aux composants natifs de chaque système.

Concrètement, quand vous utilisez un composant <Text>, React Native affiche un vrai UILabel sur iOS et un TextView sur Android. Le rendu n’est pas simulé dans un navigateur : il passe par les briques d’interface du système d’exploitation. C’est ce qui distingue l’approche d’une simple application web emballée.

Si les fondations du langage vous manquent encore, notre guide pour apprendre JavaScript pose les bases indispensables (fonctions, tableaux, objets, map) que vous retrouverez à chaque ligne.

Expo ou React Native CLI : par où commencer

Il existe deux façons de démarrer un projet, et le choix compte pour un débutant.

Expo est un ensemble d’outils construit au-dessus de React Native. Il gère pour vous la configuration native, offre de nombreux modules prêts à l’emploi (caméra, notifications, localisation) et permet de tester l’application sur votre téléphone en scannant un QR code, sans passer par Xcode ni Android Studio. C’est de loin le point d’entrée le plus simple.

React Native CLI est l’approche « nue ». Vous gérez directement les projets Xcode et Android Studio, ce qui donne un contrôle total mais demande d’installer tout l’environnement natif. On y vient quand un projet a des besoins que les modules Expo ne couvrent pas.

Pour débuter, commencez par Expo :

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

La commande expo start lance un serveur de développement et affiche un QR code. Installez l’application Expo Go sur votre téléphone, scannez le code, et votre application apparaît instantanément avec rechargement à chaud.

Les composants de base

En React Native, on n’utilise pas les balises HTML. Pas de <div>, pas de <p>. On travaille avec des composants fournis par le framework, importés depuis react-native.

Les plus courants :

  • <View> : le conteneur, l’équivalent d’une <div> ;
  • <Text> : tout affichage de texte doit passer par lui ;
  • <Image> : pour les images ;
  • <ScrollView> : un conteneur défilable ;
  • <TextInput> : un champ de saisie.

Un premier écran ressemble à ceci :

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

export default function App() {
  return (
    <View>
      <Text>Bonjour, Coder Studio !</Text>
    </View>
  );
}

Notez la règle fondamentale : tout texte doit être enveloppé dans un <Text>. Écrire du texte directement dans une <View> provoque une erreur, contrairement au web.

Le style avec StyleSheet

Il n’y a pas de CSS en React Native. Le style s’écrit en JavaScript, sous forme d’objets, via l’API StyleSheet. La mise en page repose sur Flexbox, activé par défaut, ce qui facilite grandement le positionnement.

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

export default function App() {
  return (
    <View style={styles.conteneur}>
      <Text style={styles.titre}>Mon application</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  conteneur: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f4f4f5",
  },
  titre: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#18181b",
  },
});

Les propriétés reprennent des noms proches du CSS, mais en camelCase (backgroundColor, fontSize) et sans unités : les dimensions sont des nombres. Le flex: 1 indique au conteneur d’occuper tout l’espace disponible, un réflexe que vous prendrez vite.

Une vraie application a plusieurs écrans. La bibliothèque de référence est React Navigation. Avec Expo, on peut aussi utiliser Expo Router, qui fonctionne par fichiers. Voici l’approche classique avec React Navigation et une pile d’écrans (stack).

npm install @react-navigation/native @react-navigation/native-stack

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { View, Text, Button } from "react-native";

const Stack = createNativeStackNavigator();

function Accueil({ navigation }) {
  return (
    <View>
      <Text>Écran d'accueil</Text>
      <Button title="Voir le détail" onPress={() => navigation.navigate("Detail")} />
    </View>
  );
}

function Detail() {
  return <Text>Écran de détail</Text>;
}

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

Chaque écran reçoit un objet navigation qui expose des méthodes comme navigate pour changer de page. La pile gère automatiquement le bouton retour et les transitions natives.

Gérer l’état avec useState

La logique d’état est exactement celle de React. Le hook useState déclare une donnée interne, et l’écran se ré-affiche quand elle change. Voici un compteur relié à un bouton natif.

import { useState } from "react";
import { View, Text, Button } from "react-native";

export default function Compteur() {
  const [nombre, setNombre] = useState(0);

  return (
    <View>
      <Text>Cliqué {nombre} fois</Text>
      <Button title="Ajouter" onPress={() => setNombre(nombre + 1)} />
    </View>
  );
}

Comme sur le web, la règle d’or reste : ne jamais modifier l’état directement, toujours passer par la fonction de mise à jour (setNombre). Si les concepts de composants, props et hooks vous paraissent encore flous, notre guide React pour débuter les détaille dans un contexte web, plus simple pour assimiler les bases.

Appeler une API

Récupérer des données distantes se fait avec fetch, comme dans un navigateur, combiné à useEffect pour lancer l’appel au montage de l’écran.

import { useState, useEffect } from "react";
import { View, Text, FlatList, ActivityIndicator } from "react-native";

export default function Articles() {
  const [articles, setArticles] = useState([]);
  const [chargement, setChargement] = useState(true);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => {
        setArticles(data);
        setChargement(false);
      });
  }, []);

  if (chargement) return <ActivityIndicator />;

  return (
    <FlatList
      data={articles}
      keyExtractor={(item) => String(item.id)}
      renderItem={({ item }) => <Text>{item.title}</Text>}
    />
  );
}

Deux composants méritent votre attention. <ActivityIndicator> affiche un indicateur de chargement natif. Surtout, <FlatList> est la bonne façon d’afficher une longue liste : contrairement à un map dans une ScrollView, elle ne rend à l’écran que les éléments visibles, ce qui garde l’application fluide même avec des milliers de lignes.

Publier son application

Une fois l’application prête, il faut la distribuer. Avec Expo, l’outil EAS Build compile les binaires natifs dans le cloud, sans installer Xcode ni Android Studio.

npm install -g eas-cli
eas build --platform android
eas build --platform ios

EAS produit un fichier .aab pour Android et un .ipa pour iOS. Vous les téléversez ensuite sur le Google Play Store et l’App Store via leurs consoles respectives. Comptez un compte développeur payant pour chaque plateforme, et un processus de validation avant mise en ligne, plus strict côté Apple. Prévoyez aussi les éléments annexes : icône, captures d’écran, description, politique de confidentialité.

Continuer votre apprentissage

Vous avez désormais la carte complète : le concept d’un code unique, le démarrage avec Expo, les composants, le style Flexbox, la navigation, l’état, les appels réseau et la publication. La meilleure façon de progresser est de construire une petite application réelle : une liste de tâches sauvegardée localement, une galerie qui interroge une API, un mini-lecteur de flux d’actualités. Chacun de ces projets mobilise l’ensemble des briques vues ici. Ajoutez ensuite TypeScript pour fiabiliser vos composants, et vous aurez une base solide pour le développement mobile moderne.

À lire ensuite