Annexe A — Cheatsheet web → React Native
Le dictionnaire complet, en tableaux. Chaque ligne pointe vers le chapitre qui détaille.
Éléments
| Web | React Native | Voir |
|---|---|---|
div, section, header… | View | 3.1 |
span, p, h1-h6, strong, em | Text (+ variantes AppText, imbrication) | 3.1, 4.5 |
img | Image / expo-image (dimensions requises si URI) | 3.2 |
button, a (action) | Pressable (+ android_ripple, hitSlop) | 3.3 |
a href (navigation interne) | <Link href> (Expo Router) | 5.1 |
a href (externe) | Linking.openURL() | 9.5 |
input | TextInput (onChangeText, keyboardType) | 3.5 |
input type=checkbox / toggle | Switch | 6.4 |
select | Pas de natif universel — ActionSheet, modal maison, ou lib | — |
ul scrollable / liste de données | FlatList (virtualisée, obligatoire) | 3.4 |
conteneur overflow: auto | ScrollView (contenu borné seulement) | 3.6 |
form | État contrôlé + bouton (pas de submit natif) | 3.5 |
table | Views en flexbox (ou lib) | — |
svg | react-native-svg | 10.3 |
video / audio | expo-video / expo-audio | 9.3 |
iframe / WebView | react-native-webview, DOM components | 15.4 |
dialog / modal | Route presentation: 'modal', ou Modal core | 5.4 |
CSS
| Web | React Native | Voir |
|---|---|---|
| Fichier .css / className | Objets StyleSheet — ou className via NativeWind | 4.1, 4.4 |
px, rem, em | Nombres nus = dp ; % OK | 4.1 |
display: flex | Défaut de toute View (column !) | 4.2 |
display: grid | flexWrap + calculs, ou numColumns de FlatList | 4.2, 3.6 |
:hover, :active | État pressed de Pressable / active: NativeWind | 3.3, 4.4 |
| Media queries | useWindowDimensions + conditions JS | 3.6 |
prefers-color-scheme | useColorScheme / dark: NativeWind | 4.3, 4.4 |
box-shadow | elevation (Android) + shadow* (iOS) — ou boxShadow RN 0.76+ | 4.1 |
position: fixed/sticky | Header de navigation, stickyHeaderIndices | 4.2 |
z-index global | zIndex entre frères ; Modal/portal sinon | 4.1 |
| Transitions/animations CSS | Reanimated (withTiming/withSpring, Layout Animations) | P10 |
| Héritage de police | Aucun — composant AppText | 4.5 |
gap | gap (identique !) | 4.2 |
APIs & environnement
| Web | React Native | Voir |
|---|---|---|
fetch | fetch (sans CORS, timeout à gérer) | 7.1 |
localStorage | AsyncStorage (+ persist Zustand) | 6.4 |
| IndexedDB / SQL | expo-sqlite | P8 |
window.location / router | Expo Router (router.push, params) | P5 |
document.title | Stack.Screen options={{ title }} | 5.1 |
navigator.share | Share.share() / expo-sharing | 9.4 |
navigator.clipboard | expo-clipboard | 9.4 |
| Notification API | expo-notifications (locales ≠ push) | 9.2 |
navigator.onLine | NetInfo (isInternetReachable) | 7.1 |
window.matchMedia | useWindowDimensions, useColorScheme | 3.6 |
| Service worker / PWA offline | Cache Query persisté + assets bundlés | 7.4 |
visibilitychange | AppState | 6.1 |
| Cookies / session | Tokens en header (pas de cookies fiables) | 7.1 |
console.log | Idem (terminal Metro, DevTools j) | 2.4 |
| DevTools navigateur | React Native DevTools + element inspector | 2.4 |
Outillage & déploiement
| Web (Next.js) | React Native (Expo) | Voir |
|---|---|---|
next dev | npx expo start (+ Expo Go / dev build) | 2.1 |
| Turbopack/webpack | Metro | 2.1 |
next.config.ts | app.config.ts (+ config plugins) | 11.3 |
NEXT_PUBLIC_* | extra + expo-constants (rien de secret !) | 11.3 |
next build | eas build / expo run:android | P12 |
| Déployer (Vercel) | APK sideload / Play Store / EAS Update (OTA) | P12-13 |
vercel.json envs | Profils eas.json (development/preview/production) | 11.2 |
| Domaine | Package name (IMMUABLE) | 12.1 |
| favicon/manifest | Icône adaptative + splash (cuits au build) | 12.1 |
| Lighthouse/APM | Perf monitor, profiler React, Sentry, Android vitals | 14.5, 13.6 |