Front-end · 8 mondes · 32 étapes

React Native

De vraies applis iOS et Android avec React.

Progression

0 %

0/32 étapes terminées

← Maîtrise avancée

Avancé · 13 min de lecture

Écrire du natif avec Expo Modules

Quand JavaScript ne suffit plus : Swift, Kotlin et config plugins

1Définition

L'Expo Modules API permet d'écrire des modules natifs en Swift et en Kotlin avec une syntaxe déclarative, puis de les appeler depuis JavaScript. Les config plugins, eux, modifient les projets natifs générés sans les éditer à la main.

2Principes fondamentaux

01

Quand passer au natif

Accès à une API système non couverte, SDK propriétaire, traitement lourd (image, audio) ou vue native spécifique. Vérifie d'abord qu'un module existant ne fait pas déjà le travail.

02

Une API déclarative

Un module décrit son nom, ses fonctions synchrones et asynchrones, ses événements et ses vues dans une définition unique, similaire en Swift et en Kotlin.

03

La génération native continue (CNG)

Les dossiers ios/ et android/ peuvent être régénérés à partir de la configuration avec npx expo prebuild. On ne les modifie pas à la main : on écrit des config plugins.

3Exemples pratiques

Un module en Swift

Exemple
1// ios/TouchePlusModule.swift2import ExpoModulesCore3 4public class TouchePlusModule: Module {5  public func definition() -> ModuleDefinition {6    Name("TouchePlus")7 8    Function("salut") { (prenom: String) -> String in9      return "Salut \(prenom), depuis Swift !"10    }11 12    AsyncFunction("vibrer") { (duree: Int) in13      // appel d'une API système14    }15  }16}

Le même module s'écrit presque à l'identique en Kotlin. Côté JS : requireNativeModule('TouchePlus').salut('Awa').

Un config plugin

Exemple
1// plugins/withCamera.js2const { withInfoPlist } = require('expo/config-plugins');3 4module.exports = function withCamera(config, { message }) {5  return withInfoPlist(config, (cfg) => {6    cfg.modResults.NSCameraUsageDescription = message;7    return cfg;8  });9};

Ajouté dans app.json (plugins), il écrit la bonne clé dans Info.plist à chaque génération du projet iOS.

4Erreurs courantes

Modifier ios/ à la main

À éviter

// édition directe de ios/MonApp/Info.plist

À faire

// un config plugin ou la clé correspondante dans app.json

Pourquoi : Au prochain prebuild, les modifications manuelles sont écrasées.

Tester un module natif dans Expo Go

À éviter

npx expo start // puis ouvrir dans Expo Go

À faire

npx expo run:ios // ou un development build via EAS

Pourquoi : Expo Go ne contient que les modules du SDK Expo : ton code natif n'y existe pas.

5Subtilités à connaître

  • ◆npx create-expo-module@latest --local crée un module directement dans ton projet, sans publier de paquet.
  • ◆Les événements natifs se déclarent avec Events("surChangement") et s'écoutent côté JS avec addListener.
  • ◆Une vue native se déclare avec View(MaVue.self) et ses props avec Prop("couleur").

6Techniques d'expert

Des types partagés

Les Record d'Expo Modules convertissent automatiquement des objets JS en structures Swift/Kotlin typées : fini la validation manuelle de dictionnaires.

Des vues natives performantes

Pour une carte, un lecteur vidéo ou une caméra, exposer une vue native évite d'aller-retour coûteux entre JS et natif à chaque image.

Publier en interne

Un module local peut devenir un paquet privé partagé entre plusieurs apps de l'entreprise.

7Sur le terrain

  • Les applis de santé lisent des capteurs (podomètre, fréquence cardiaque) via des modules natifs.
  • Les applis de paiement intègrent les SDK natifs des terminaux et des banques.
  • Les applis photo déportent le traitement d'image en Swift et Kotlin pour la vitesse.

8Vérifie ta compréhension

Question 1/3

Score 0

Pourquoi ne pas éditer ios/ à la main avec CNG ?

Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.