Premiers écrans : composants natifs et styles

React, mais pour des applications natives

Vous connaissez React pour le web : des composants, des props, de l’état. React Native garde exactement ce modèle, mais au lieu de produire du HTML, il pilote de vrais composants natifs d’iOS et d’Android. Un <View> devient une vue native Android ou iOS, un <Text> un champ de texte natif. Il n’y a pas de DOM, pas de <div>, pas de CSS : on écrit du JavaScript (ou du TypeScript) et React Native traduit.

Le même code sert les deux plateformes, ce qui est l’intérêt principal ; quelques ajustements par plateforme restent possibles avec Platform.OS.

Démarrer avec Expo

Expo est le cadre recommandé par la documentation de React Native pour démarrer un projet. Il fournit l’outillage (création, serveur de développement, compilation) et de nombreux modules natifs prêts à l’emploi (caméra, localisation, stockage sécurisé).

npx create-expo-app@latest MaBoutique     # Node.js 22.13 ou plus récent (LTS 26 conseillée)
cd MaBoutique
npx expo start

Le modèle actuel (Expo SDK 58, React Native 0.88, React 19.3) range le code dans src/ : les écrans dans src/app/, les composants dans src/components/. Il contient un écran d’exemple ; npm run reset-project le remplace par un src/app/index.tsx vierge.

npx expo start affiche un QR code. Scannez-le avec l’application Expo Go sur votre téléphone (même réseau Wi-Fi) ou appuyez sur a pour un émulateur Android, i pour le simulateur iOS (sur Mac). Chaque enregistrement recharge l’écran instantanément.

Les composants de base

import { useState } from "react";
import { View, Text, Image, TextInput, Pressable, StyleSheet } from "react-native";

export default function Accueil() {
  const [nom, setNom] = useState("");
  return (
    <View style={styles.ecran}>
      <Image source={{ uri: "https://exemple.fr/logo.png" }} style={styles.logo} />
      <Text style={styles.titre}>Bienvenue</Text>
      <TextInput
        style={styles.champ}
        value={nom}
        onChangeText={setNom}
        placeholder="Votre prénom"
        autoCapitalize="words"
      />
      <Pressable
        onPress={() => console.log("Bonjour", nom)}
        style={({ pressed }) => [styles.bouton, pressed && styles.boutonPresse]}
      >
        <Text style={styles.texteBouton}>Valider</Text>
      </Pressable>
    </View>
  );
}

• View : le conteneur, équivalent de la div.
• Text : tout texte doit être dans un Text. Une chaîne placée directement dans une View provoque une erreur.
• Image : une image distante (source={{ uri }}) doit recevoir une taille explicite ; une image locale se charge avec source={require("./assets/logo.png")}.
• TextInput : la saisie, contrôlée par value et onChangeText (qui reçoit directement le texte, pas un événement).
• Pressable : la zone appuyable, avec onPress. Son style peut être une fonction recevant { pressed } pour donner un retour visuel.

D’autres composants courants : ScrollView (contenu défilant), FlatList (listes longues, leçon suivante), ActivityIndicator (chargement), Switch, Modal.

Les styles

Les styles sont des objets JavaScript, regroupés avec StyleSheet.create :

const styles = StyleSheet.create({
  ecran: { flex: 1, padding: 24, justifyContent: "center", gap: 12, backgroundColor: "#fff" },
  logo: { width: 96, height: 96, alignSelf: "center" },
  titre: { fontSize: 28, fontWeight: "700" },
  champ: { borderWidth: 1, borderColor: "#ccc", borderRadius: 8, padding: 12, fontSize: 16 },
  bouton: { backgroundColor: "#0a6", padding: 14, borderRadius: 8, alignItems: "center" },
  boutonPresse: { opacity: 0.7 },
  texteBouton: { color: "#fff", fontSize: 16, fontWeight: "600" },
});

Les différences avec le CSS du web sont importantes :

• propriétés en camelCase (backgroundColor), valeurs numériques sans unité : ce sont des points indépendants de la densité de l’écran ;
• Flexbox partout, avec flexDirection: "column" par défaut (sur le web, c’est row) ;
• pas de cascade : un style posé sur une View ne s’applique pas au Text qu’elle contient. Seuls les Text imbriqués héritent du style de leur parent Text ;
• on combine plusieurs styles avec un tableau : style={[styles.bouton, desactive && styles.desactive]} ; les valeurs false ou null sont ignorées et le dernier style l’emporte.

flex: 1 fait occuper à un élément tout l’espace disponible : c’est généralement le style de la vue racine d’un écran.

Zones sûres et accessibilité

Les téléphones ont des encoches et des barres système. Enveloppez vos écrans dans SafeAreaView du paquet react-native-safe-area-context (inclus dans les modèles Expo) pour éviter que le contenu passe dessous. Pensez aussi à l’accessibilité : accessibilityLabel sur un bouton icône, accessibilityRole="button" sur un Pressable, et des zones d’appui d’au moins 44 points environ.

À retenir

• Composants natifs : View, Text (obligatoire pour le texte), Image, TextInput, Pressable.
• Styles en objets, camelCase, sans unité, Flexbox en colonne par défaut, pas de cascade.
• Expo pour créer, lancer et tester sur un vrai téléphone.