5 pièges React Native que j'aurais aimé connaître avant

1 — KeyboardAvoidingView ne marche pas pareil sur iOS et Android

Sur iOS, il faut behavior="padding". Sur Android, rien : le système gère déjà l'adjust. Si tu mets padding sur Android, ton input est masqué par le clavier.

<KeyboardAvoidingView
  behavior={Platform.OS === "ios" ? "padding" : undefined}
>
  ...
</KeyboardAvoidingView>

2 — Les images locales ne se chargent pas si tu fais { uri: "./photo.jpg" }

Pour les assets locaux, toujours require :

// ❌ Affiche un cadre vide
<Image source={{ uri: "./photo.jpg" }} />

// ✅ Marche
<Image source={require("./photo.jpg")} />

3 — FlatList rend tout l'écran si tu oublies getItemLayout

Sur 10 items, on s'en fiche. Sur 10 000, l'app freeze. Donne la hauteur fixe :

<FlatList
  data={items}
  getItemLayout={(_, i) => ({
    length: 80,
    offset: 80 * i,
    index: i,
  })}
  ...
/>

4 — SafeAreaView n'est pas l'SafeAreaView que tu crois

Le react-native natif est buggué sur Android. Utilise react-native-safe-area-context :

import { SafeAreaView } from "react-native-safe-area-context";

5 — Les permissions iOS demandent un Info.plist même pour le dev

Si tu utilises la caméra, le micro, la galerie, chaque permission doit être déclarée avec une NSXxxUsageDescription. Sinon : crash silencieux en release.

Bilan

React Native, c'est génial — quand tu connais les chausse-trapes. Le pire ennemi : croire que c'est « du React ». Ça l'est en surface ; en profondeur, c'est du natif déguisé.